<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>CSS Color Module Level 4</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="exploring" name="csswg-work-status">
  <meta content="ED" name="w3c-status">
  <meta content="This specification describes CSS <color> values and properties for foreground color and group opacity." name="abstract">
  <link href="../default.css" rel="stylesheet" type="text/css">
  <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
<style>
  body {
    background: url("https://www.w3.org/StyleSheets/TR/logo-ED") top left no-repeat;
  }
  </style>
  <link href="https://www.w3.org/TR/css-color-4/" rel="canonical">
<script defer src="https://test.csswg.org/harness/annotate.js#!css-color-4_dev/css-color-4" type="text/javascript"></script>
<style>
table.named-color-table thead th { text-align:center; background:black; color:white; }
table.named-color-table th, table.named-color-table td { padding: 0 .25em; }
table.named-color-table td { text-align:center; text-transform:uppercase; }
table.named-color-table td:nth-child(-n+2) { border:1px solid black; }
table.named-color-table td:nth-child(n+4) { background: silver; }
.color-table {
	background: #808080;
	display: table;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
}
.color-table table { padding:1em; margin:0; float:left; }
.color-table td, .color-table th { font-size:smaller; }
.color-table th { white-space: pre-line; }
.color-table td { background: currentcolor; }
.color-table .white { color: white; }
</style>
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */

.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
   <h1 class="p-name no-ref" id="title">CSS Color Module Level 4</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <details>
    <summary>Specification Metadata</summary>
    <div data-fill-with="spec-metadata">
     <dl>
      <dt>This version:
      <dd><a class="u-url" href="https://drafts.csswg.org/css-color/">https://drafts.csswg.org/css-color/</a>
      <dt>Latest published version:
      <dd><a href="https://www.w3.org/TR/css-color-4/">https://www.w3.org/TR/css-color-4/</a>
      <dt>Previous Versions:
      <dd><a href="https://www.w3.org/TR/2019/WD-css-color-4-20191105/" rel="prev">https://www.w3.org/TR/2019/WD-css-color-4-20191105/</a>
      <dt>Test Suite:
      <dd><a href="http://test.csswg.org/suites/css-color-4_dev/nightly-unstable/">http://test.csswg.org/suites/css-color-4_dev/nightly-unstable/</a>
      <dt class="editor">Editors:
      <dd class="editor p-author h-card vcard" data-editor-id="42199"><a class="p-name fn u-url url" href="http://xanthir.com/contact">Tab Atkins Jr.</a> (<span class="p-org org">Google</span>)
      <dd class="editor p-author h-card vcard" data-editor-id="1438"><a class="p-name fn u-email email" href="mailto:chris@w3.org">Chris Lilley</a> (<span class="p-org org">W3C</span>)
      <dt class="editor">Former Editor:
      <dd class="editor p-author h-card vcard" data-editor-id="15393"><a class="p-name fn u-url url" href="https://dbaron.org/">L. David Baron</a> (<a class="p-org org" href="https://www.mozilla.org/">Mozilla</a>)
      <dt>Suggest an Edit for this Spec:
      <dd><a href="https://github.com/w3c/csswg-drafts/blob/master/css-color-4/Overview.bs">GitHub Editor</a>
      <dt>Issue Tracking:
      <dd><a href="https://github.com/w3c/csswg-drafts/labels/css-color-4">GitHub Issues</a>
     </dl>
    </div>
   </details>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document">permissive document license</a> rules apply. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>This specification describes CSS <a class="production css" data-link-type="type" href="#typedef-color" id="ref-for-typedef-color" title="Expands to: indigo | gold | firebrick | indianred | yellow | darkolivegreen | darkseagreen | slategrey | darkslategrey | mediumvioletred | mediumorchid | transparent | chartreuse | mediumslateblue | black | springgreen | crimson | lightsalmon | brown | turquoise | olivedrab | cyan | silver | skyblue | gray | darkturquoise | goldenrod | darkgreen | darkviolet | darkgray | lightpink | teal | darkmagenta | lightgoldenrodyellow | lavender | yellowgreen | thistle | violet | navy | dimgrey | orchid | blue | ghostwhite | honeydew | cornflowerblue | darkblue | darkkhaki | mediumpurple | cornsilk | red | bisque | slategray | darkcyan | khaki | wheat | deepskyblue | rebeccapurple | darkred | steelblue | aliceblue | lightslategrey | gainsboro | mediumturquoise | floralwhite | coral | purple | lightgrey | lightcyan | darksalmon | beige | azure | lightsteelblue | oldlace | greenyellow | royalblue | lightseagreen | mistyrose | sienna | lightcoral | orangered | navajowhite | lime | palegreen | burlywood | seashell | mediumspringgreen | fuchsia | papayawhip | blanchedalmond | peru | aquamarine | white | darkslategray | tomato | ivory | dodgerblue | currentcolor | lemonchiffon | chocolate | orange | forestgreen | darkgrey | olive | mintcream | antiquewhite | darkorange | cadetblue | moccasin | limegreen | saddlebrown | grey | darkslateblue | lightskyblue | deeppink | plum | aqua | darkgoldenrod | maroon | sandybrown | magenta | tan | rosybrown | pink | lightblue | palevioletred | mediumseagreen | slateblue | dimgray | powderblue | seagreen | snow | mediumblue | midnightblue | paleturquoise | palegoldenrod | whitesmoke | darkorchid | salmon | lightslategray | lawngreen | lightgreen | lightgray | hotpink | lightyellow | lavenderblush | linen | mediumaquamarine | green | blueviolet | peachpuff">&lt;color></a> values and properties for foreground color and group opacity.</p>
    <a href="https://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, etc. 
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> This is a public copy of the editors’ draft.
	It is provided for discussion only and may change at any moment.
	Its publication here does not imply endorsement of its contents by W3C.
	Don’t cite this document other than as work in progress. </p>
   <p> <a href="https://github.com/w3c/csswg-drafts/issues">GitHub Issues</a> are preferred for discussion of this specification.
	When filing an issue, please put the text “css-color” in the title,
	preferably like this:
	“[css-color] <i data-lt>…summary of comment…</i>”.
	All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-css-archive/">archived</a>,
	and there is also a <a href="https://lists.w3.org/Archives/Public/www-style/">historical archive</a>. </p>
   <p> This document was produced by the <a href="https://www.w3.org/Style/CSS/">CSS Working Group</a>. </p>
   <p> This document was produced by a group operating under
	the <a href="https://www.w3.org/Consortium/Patent-Policy/">W3C Patent Policy</a>.
	W3C maintains a <a href="https://www.w3.org/2004/01/pp-impl/32061/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group;
	that page also includes instructions for disclosing a patent.
	An individual who has actual knowledge of a patent which the individual believes contains <a href="https://www.w3.org/Consortium/Patent-Policy/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="https://www.w3.org/Consortium/Patent-Policy/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </p>
   <p> This document is governed by the <a href="https://www.w3.org/2019/Process-20190301/" id="w3c_process_revision">1 March 2019 W3C Process Document</a>. </p>
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li><a href="#introduction"><span class="secno">1</span> <span class="content"> Introduction</span></a>
    <li><a href="#terminology"><span class="secno">2</span> <span class="content">Color terminology</span></a>
    <li><a href="#the-color-property"><span class="secno">3</span> <span class="content"> Foreground Color: the <span class="property">color</span> property</span></a>
    <li>
     <a href="#color-type"><span class="secno">4</span> <span class="content"> Representing Colors: the <span class="production" title="Expands to: indigo | gold | firebrick | indianred | yellow | darkolivegreen | darkseagreen | slategrey | darkslategrey | mediumvioletred | mediumorchid | transparent | chartreuse | mediumslateblue | black | springgreen | crimson | lightsalmon | brown | turquoise | olivedrab | cyan | silver | skyblue | gray | darkturquoise | goldenrod | darkgreen | darkviolet | darkgray | lightpink | teal | darkmagenta | lightgoldenrodyellow | lavender | yellowgreen | thistle | violet | navy | dimgrey | orchid | blue | ghostwhite | honeydew | cornflowerblue | darkblue | darkkhaki | mediumpurple | cornsilk | red | bisque | slategray | darkcyan | khaki | wheat | deepskyblue | rebeccapurple | darkred | steelblue | aliceblue | lightslategrey | gainsboro | mediumturquoise | floralwhite | coral | purple | lightgrey | lightcyan | darksalmon | beige | azure | lightsteelblue | oldlace | greenyellow | royalblue | lightseagreen | mistyrose | sienna | lightcoral | orangered | navajowhite | lime | palegreen | burlywood | seashell | mediumspringgreen | fuchsia | papayawhip | blanchedalmond | peru | aquamarine | white | darkslategray | tomato | ivory | dodgerblue | currentcolor | lemonchiffon | chocolate | orange | forestgreen | darkgrey | olive | mintcream | antiquewhite | darkorange | cadetblue | moccasin | limegreen | saddlebrown | grey | darkslateblue | lightskyblue | deeppink | plum | aqua | darkgoldenrod | maroon | sandybrown | magenta | tan | rosybrown | pink | lightblue | palevioletred | mediumseagreen | slateblue | dimgray | powderblue | seagreen | snow | mediumblue | midnightblue | paleturquoise | palegoldenrod | whitesmoke | darkorchid | salmon | lightslategray | lawngreen | lightgreen | lightgray | hotpink | lightyellow | lavenderblush | linen | mediumaquamarine | green | blueviolet | peachpuff">&lt;color></span> type</span></a>
     <ol class="toc">
      <li><a href="#notes"><span class="secno">4.1</span> <span class="content"> Accessibility and Conveying Information By Color</span></a>
      <li><a href="#untagged"><span class="secno">4.2</span> <span class="content"> Color Spaces of Untagged Colors</span></a>
      <li><a href="#resolving-color-values"><span class="secno">4.3</span> <span class="content"> Resolving <span class="production" title="Expands to: indigo | gold | firebrick | indianred | yellow | darkolivegreen | darkseagreen | slategrey | darkslategrey | mediumvioletred | mediumorchid | transparent | chartreuse | mediumslateblue | black | springgreen | crimson | lightsalmon | brown | turquoise | olivedrab | cyan | silver | skyblue | gray | darkturquoise | goldenrod | darkgreen | darkviolet | darkgray | lightpink | teal | darkmagenta | lightgoldenrodyellow | lavender | yellowgreen | thistle | violet | navy | dimgrey | orchid | blue | ghostwhite | honeydew | cornflowerblue | darkblue | darkkhaki | mediumpurple | cornsilk | red | bisque | slategray | darkcyan | khaki | wheat | deepskyblue | rebeccapurple | darkred | steelblue | aliceblue | lightslategrey | gainsboro | mediumturquoise | floralwhite | coral | purple | lightgrey | lightcyan | darksalmon | beige | azure | lightsteelblue | oldlace | greenyellow | royalblue | lightseagreen | mistyrose | sienna | lightcoral | orangered | navajowhite | lime | palegreen | burlywood | seashell | mediumspringgreen | fuchsia | papayawhip | blanchedalmond | peru | aquamarine | white | darkslategray | tomato | ivory | dodgerblue | currentcolor | lemonchiffon | chocolate | orange | forestgreen | darkgrey | olive | mintcream | antiquewhite | darkorange | cadetblue | moccasin | limegreen | saddlebrown | grey | darkslateblue | lightskyblue | deeppink | plum | aqua | darkgoldenrod | maroon | sandybrown | magenta | tan | rosybrown | pink | lightblue | palevioletred | mediumseagreen | slateblue | dimgray | powderblue | seagreen | snow | mediumblue | midnightblue | paleturquoise | palegoldenrod | whitesmoke | darkorchid | salmon | lightslategray | lawngreen | lightgreen | lightgray | hotpink | lightyellow | lavenderblush | linen | mediumaquamarine | green | blueviolet | peachpuff">&lt;color></span> Values</span></a>
     </ol>
    <li>
     <a href="#numeric-srgb"><span class="secno">5</span> <span class="content"> sRGB Colors</span></a>
     <ol class="toc">
      <li><a href="#rgb-functions"><span class="secno">5.1</span> <span class="content"> The RGB functions: <span class="css">rgb()</span> and <span class="css">rgba()</span></span></a>
      <li><a href="#hex-notation"><span class="secno">5.2</span> <span class="content"> The RGB hexadecimal notations: <span class="css">#RRGGBB</span></span></a>
     </ol>
    <li>
     <a href="#color-keywords"><span class="secno">6</span> <span class="content"> Color Keywords</span></a>
     <ol class="toc">
      <li><a href="#named-colors"><span class="secno">6.1</span> <span class="content"> Named Colors</span></a>
      <li><a href="#css-system-colors"><span class="secno">6.2</span> <span class="content"> System Colors</span></a>
      <li><a href="#transparent-color"><span class="secno">6.3</span> <span class="content"> The <span class="css">transparent</span> keyword</span></a>
      <li><a href="#currentcolor-color"><span class="secno">6.4</span> <span class="content"> The <span class="css">currentcolor</span> keyword</span></a>
     </ol>
    <li>
     <a href="#the-hsl-notation"><span class="secno">7</span> <span class="content"> HSL Colors: <span class="css">hsl()</span> and <span class="css">hsla()</span> functions</span></a>
     <ol class="toc">
      <li><a href="#hsl-to-rgb"><span class="secno">7.1</span> <span class="content"> Converting HSL colors to sRGB colors</span></a>
      <li><a href="#hsl-examples"><span class="secno">7.2</span> <span class="content"> Examples of HSL colors</span></a>
     </ol>
    <li>
     <a href="#the-hwb-notation"><span class="secno">8</span> <span class="content"> HWB Colors: <span class="css">hwb()</span> function</span></a>
     <ol class="toc">
      <li><a href="#hwb-to-rgb"><span class="secno">8.1</span> <span class="content"> Converting HWB colors to sRGB colors</span></a>
      <li><a href="#hwb-examples"><span class="secno">8.2</span> <span class="content"> Examples of HWB Colors</span></a>
     </ol>
    <li>
     <a href="#lab-colors"><span class="secno">9</span> <span class="content"> Device-independent Colors: Lab and LCH</span></a>
     <ol class="toc">
      <li><a href="#specifying-lab-lch"><span class="secno">9.1</span> <span class="content"> Specifying Lab and LCH: the <span class="css">lab()</span> and <span class="css">lch()</span> functional notations</span></a>
      <li><a href="#rgb-to-lab"><span class="secno">9.2</span> <span class="content"> Converting sRGB colors to Lab colors</span></a>
      <li><a href="#lab-to-rgb"><span class="secno">9.3</span> <span class="content"> Converting Lab colors to sRGB  colors</span></a>
      <li><a href="#lab-to-lch"><span class="secno">9.4</span> <span class="content"> Converting Lab colors to LCH colors</span></a>
      <li><a href="#lch-to-lab"><span class="secno">9.5</span> <span class="content"> Converting LCH colors to Lab  colors</span></a>
     </ol>
    <li>
     <a href="#icc-colors"><span class="secno">10</span> <span class="content"> Profiled, Device-dependent Colors</span></a>
     <ol class="toc">
      <li><a href="#color-function"><span class="secno">10.1</span> <span class="content">Specifying profiled colors: the <span class="css">color()</span> function</span></a>
      <li>
       <a href="#predefined"><span class="secno">10.2</span> <span class="content"> Predefined colorspaces: <span class="css">srgb</span>, <span class="css">display-p3</span>, <span class="css">a98-rgb</span>, <span class="css">prophoto-rgb</span> and <span class="css">rec-2020</span>.</span></a>
       <ol class="toc">
        <li><a href="#predefined-to-lab"><span class="secno">10.2.1</span> <span class="content"> Converting predefined colorspaces to Lab</span></a>
        <li><a href="#lab-to-predefined"><span class="secno">10.2.2</span> <span class="content"> Converting Lab to predefined colorspaces</span></a>
       </ol>
      <li><a href="#at-profile"><span class="secno">10.3</span> <span class="content"> Specifying a color profile: the <span class="css">@color-profile</span> at-rule</span></a>
     </ol>
    <li><a href="#working-color-space"><span class="secno">11</span> <span class="content"> Working Color Space</span></a>
    <li>
     <a href="#cmyk-colors"><span class="secno">12</span> <span class="content"> Device-dependent CMYK Colors: the <span class="css">device-cmyk()</span> function</span></a>
     <ol class="toc">
      <li><a href="#cmyk-rgb"><span class="secno">12.1</span> <span class="content"> Converting Between Uncalibrated CMYK and RGB-Based Colors</span></a>
     </ol>
    <li>
     <a href="#transparency"><span class="secno">13</span> <span class="content"> Transparency: the <span class="property">opacity</span> property</span></a>
     <ol class="toc">
      <li><a href="#alpha"><span class="secno">13.1</span> <span class="content"> Simple alpha compositing</span></a>
     </ol>
    <li><a href="#sample"><span class="secno">14</span> <span class="content"> Default Style Rules</span></a>
    <li><a href="#color-conversion-code"><span class="secno">15</span> <span class="content">Sample code for color conversions</span></a>
    <li><a href="#deprecated-system-colors"><span class="secno"></span> <span class="content"> Appendix A: Deprecated CSS System Colors</span></a>
    <li><a href="#acknowledgments"><span class="secno"></span> <span class="content"> Acknowledgments</span></a>
    <li>
     <a href="#changes"><span class="secno"></span> <span class="content"> Changes</span></a>
     <ol class="toc">
      <li><a href="#changes-from-20191105"><span class="secno"></span> <span class="content">Changes since <span>Working Draft of
5 November 2019</span></span></a>
      <li><a href="#changes-from-20160705"><span class="secno"></span> <span class="content">Changes since <span>Working Draft of 05 July 2016</span></span></a>
      <li><a href="#changes-from-3"><span class="secno"></span> <span class="content"> Changes from Colors 3</span></a>
     </ol>
    <li><a href="#priv-sec"><span class="secno">16</span> <span class="content">Security and Privacy Considerations</span></a>
    <li>
     <a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
     <ol class="toc">
      <li><a href="#document-conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a>
      <li><a href="#conform-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a>
      <li>
       <a href="#conform-responsible"><span class="secno"></span> <span class="content"> Requirements for Responsible Implementation of CSS</span></a>
       <ol class="toc">
        <li><a href="#conform-partial"><span class="secno"></span> <span class="content"> Partial Implementations</span></a>
        <li><a href="#conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a>
        <li><a href="#conform-testing"><span class="secno"></span> <span class="content"> Implementations of CR-level Features</span></a>
       </ol>
     </ol>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
      <li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a>
     </ol>
    <li>
     <a href="#property-index"><span class="secno"></span> <span class="content">Property Index</span></a>
     <ol class="toc">
      <li><a href="#color-profile-descriptor-table"><span class="secno"></span> <span class="content"><span>@color-profile</span> Descriptors</span></a>
     </ol>
    <li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="introduction"><span class="secno">1. </span><span class="content"> Introduction</span><a class="self-link" href="#introduction"></a></h2>
   <p><em>This section is not normative.</em></p>
   <p>This module describes CSS properties which
	allow authors to specify
	the foreground color and opacity of the text content of an element.
	This module also describes in detail the CSS <a class="production css" data-link-type="type" href="#typedef-color" id="ref-for-typedef-color①" title="Expands to: indigo | gold | firebrick | indianred | yellow | darkolivegreen | darkseagreen | slategrey | darkslategrey | mediumvioletred | mediumorchid | transparent | chartreuse | mediumslateblue | black | springgreen | crimson | lightsalmon | brown | turquoise | olivedrab | cyan | silver | skyblue | gray | darkturquoise | goldenrod | darkgreen | darkviolet | darkgray | lightpink | teal | darkmagenta | lightgoldenrodyellow | lavender | yellowgreen | thistle | violet | navy | dimgrey | orchid | blue | ghostwhite | honeydew | cornflowerblue | darkblue | darkkhaki | mediumpurple | cornsilk | red | bisque | slategray | darkcyan | khaki | wheat | deepskyblue | rebeccapurple | darkred | steelblue | aliceblue | lightslategrey | gainsboro | mediumturquoise | floralwhite | coral | purple | lightgrey | lightcyan | darksalmon | beige | azure | lightsteelblue | oldlace | greenyellow | royalblue | lightseagreen | mistyrose | sienna | lightcoral | orangered | navajowhite | lime | palegreen | burlywood | seashell | mediumspringgreen | fuchsia | papayawhip | blanchedalmond | peru | aquamarine | white | darkslategray | tomato | ivory | dodgerblue | currentcolor | lemonchiffon | chocolate | orange | forestgreen | darkgrey | olive | mintcream | antiquewhite | darkorange | cadetblue | moccasin | limegreen | saddlebrown | grey | darkslateblue | lightskyblue | deeppink | plum | aqua | darkgoldenrod | maroon | sandybrown | magenta | tan | rosybrown | pink | lightblue | palevioletred | mediumseagreen | slateblue | dimgray | powderblue | seagreen | snow | mediumblue | midnightblue | paleturquoise | palegoldenrod | whitesmoke | darkorchid | salmon | lightslategray | lawngreen | lightgreen | lightgray | hotpink | lightyellow | lavenderblush | linen | mediumaquamarine | green | blueviolet | peachpuff">&lt;color></a> value type.</p>
   <p>It not only defines the color-related properties and values that
	already exist in <a href="https://www.w3.org/TR/CSS1">CSS1</a>, <a href="https://www.w3.org/TR/CSS2/">CSS2</a>,
	and <a href="https://www.w3.org/TR/css-color-3/">CSS Color 3</a>,
	but also defines new properties and values.</p>
   <p>In particular, it allows specifying colors
	in other <a data-link-type="dfn" href="#colorspace" id="ref-for-colorspace">colorspaces</a> than sRGB;
	previously, the more saturated colors ouside the sRGB gamut
	could not be used in CSS
	even if the display device supported them.
	In addition to the family of <abbr title="red-green-blue">RGB</abbr> colorspaces, <span id="ref-for-colorspace①">colorspaces</span> with other primaries
	such as <abbr title="cyan-magenta-yellow-black">CMYK</abbr> or <abbr title="cyan-magenta-yellow-green-orange-violet-black">CMYGOVK</abbr> are supported.</p>
   <h2 class="heading settled" data-level="2" id="terminology"><span class="secno">2. </span><span class="content">Color terminology</span><a class="self-link" href="#terminology"></a></h2>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="color">color</dfn> is a definition (numeric or textual)
	of the human visual perception of a light
	or a physical object illuminated with light.
	The objective study of human color perception is termed <abbr title="colorimetry is the measurement of human color perception">colorimetry</abbr>.
	If two objects have different <abbr title="the amount of light at each wavelength">spectra</abbr>,
	but produce the same physical sensation,
	we say they have the same color.</p>
   <div class="example" id="example-7fac77d2"><a class="self-link" href="#example-7fac77d2"></a>For example a green leaf, a photograph of that leaf
		displayed on a computer screen, and a print of that photograph,
		are all producing a green sensation by different means.
		If the screen and the printer are <a data-link-type="dfn" href="#calibrated" id="ref-for-calibrated">calibrated</a>,
		the green in the leaf, and the photo, and the print will look the same. </div>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="colorspace">colorspace</dfn> is an organization of colors
	with respect to an underlying <abbr title="colorimetry is the measurement of human color perception">colorimetric</abbr> model,
	such that there is a clear, objectively-measurable meaning
	for any color in that colorspace.
	This also means that the same color can be expressed in multiple colorspaces,
	or transformed from one colorspace to another,
	while looking the same.</p>
   <div class="example" id="example-d41d8cd9"><a class="self-link" href="#example-d41d8cd9"></a></div>
   <p>When the measured physical characteristics
	(such as the chromaticities of the primary colors it uses,
	or the colors produced in response to a given set of inputs)
	of a <a data-link-type="dfn" href="#colorspace" id="ref-for-colorspace②">colorspace</a> or a color-producing device are known,
	it is said to be <dfn data-dfn-type="dfn" data-noexport id="characterised">characterised<a class="self-link" href="#characterised"></a></dfn>.
	This characterization information is stored in a <em>profile</em>.
	The most common type of color profile is defined by the International Color Consortium (ICC) <a data-link-type="biblio" href="#biblio-icc">[ICC]</a>.</p>
   <p>If in addition adjustments have been made so that a device meets calibration targets
	such as white point, neutrality of greys, predictability and consistency of tone response,
	then it is said to be <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="calibrated">calibrated</dfn>.</p>
   <p>Real physical devices cannot yet produce every possible color that the human eye can see.
	The range of colors that a given device can produce is termed the <dfn data-dfn-type="dfn" data-noexport id="gamut">gamut<a class="self-link" href="#gamut"></a></dfn> <em>not to be confused with gamma</em>.
	Devices with a limited gamut cannot produce very saturated colors,
	like those found in a rainbow.</p>
   <h2 class="heading settled" data-level="3" id="the-color-property"><span class="secno">3. </span><span class="content"> Foreground Color: the <a class="property" data-link-type="propdesc" href="#propdef-color" id="ref-for-propdef-color">color</a> property</span><a class="self-link" href="#the-color-property"></a></h2>
   <table class="def propdef" data-link-for-hint="color">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-color">color</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production css" data-link-type="type" href="#typedef-color" id="ref-for-typedef-color②" title="Expands to: indigo | gold | firebrick | indianred | yellow | darkolivegreen | darkseagreen | slategrey | darkslategrey | mediumvioletred | mediumorchid | transparent | chartreuse | mediumslateblue | black | springgreen | crimson | lightsalmon | brown | turquoise | olivedrab | cyan | silver | skyblue | gray | darkturquoise | goldenrod | darkgreen | darkviolet | darkgray | lightpink | teal | darkmagenta | lightgoldenrodyellow | lavender | yellowgreen | thistle | violet | navy | dimgrey | orchid | blue | ghostwhite | honeydew | cornflowerblue | darkblue | darkkhaki | mediumpurple | cornsilk | red | bisque | slategray | darkcyan | khaki | wheat | deepskyblue | rebeccapurple | darkred | steelblue | aliceblue | lightslategrey | gainsboro | mediumturquoise | floralwhite | coral | purple | lightgrey | lightcyan | darksalmon | beige | azure | lightsteelblue | oldlace | greenyellow | royalblue | lightseagreen | mistyrose | sienna | lightcoral | orangered | navajowhite | lime | palegreen | burlywood | seashell | mediumspringgreen | fuchsia | papayawhip | blanchedalmond | peru | aquamarine | white | darkslategray | tomato | ivory | dodgerblue | currentcolor | lemonchiffon | chocolate | orange | forestgreen | darkgrey | olive | mintcream | antiquewhite | darkorange | cadetblue | moccasin | limegreen | saddlebrown | grey | darkslateblue | lightskyblue | deeppink | plum | aqua | darkgoldenrod | maroon | sandybrown | magenta | tan | rosybrown | pink | lightblue | palevioletred | mediumseagreen | slateblue | dimgray | powderblue | seagreen | snow | mediumblue | midnightblue | paleturquoise | palegoldenrod | whitesmoke | darkorchid | salmon | lightslategray | lawngreen | lightgreen | lightgray | hotpink | lightyellow | lavenderblush | linen | mediumaquamarine | green | blueviolet | peachpuff">&lt;color></a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td><a class="css" data-link-type="maybe" href="#valdef-color-black" id="ref-for-valdef-color-black">black</a> 
     <tr>
      <th>Applies to:
      <td><a href="https://drafts.csswg.org/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>yes 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>N/A 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>computed color, see <a data-link-type="dfn" href="https://drafts.csswg.org/css-color-4/#resolve-color-values" id="ref-for-resolve-color-values">resolving color values</a> 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>by computed value type 
   </table>
   <p>This property describes the foreground fill color of an element’s text content.
	In addition, it provides the value that <a class="css" data-link-type="maybe" href="#valdef-color-currentcolor" id="ref-for-valdef-color-currentcolor">currentcolor</a> resolves to.</p>
   <p>There are several different ways to syntactically specify a given color.</p>
    For example, to specify lime green: 
   <div class="example" id="example-9606cfc0">
    <a class="self-link" href="#example-9606cfc0"></a> 
<pre class="lang-css highlight"><c- f>em </c-><c- p>{</c-> <c- k>color</c-><c- p>:</c-> lime<c- p>;</c-> <c- p>}</c->            <c- c>/* color keyword     */</c->
<c- f>em </c-><c- p>{</c-> <c- k>color</c-><c- p>:</c-> <c- nf>rgb</c-><c- p>(</c-><c- m>0</c-> <c- m>255</c-> <c- m>0</c-><c- p>);</c-> <c- p>}</c->    <c- c>/* RGB range 0-255   */</c->
<c- f>em </c-><c- p>{</c-> <c- k>color</c-><c- p>:</c-> <c- nf>rgb</c-><c- p>(</c-><c- m>0</c-><c- l>%</c-> <c- m>100</c-><c- l>%</c-> <c- m>0</c-><c- l>%</c-><c- p>);</c-> <c- p>}</c-> <c- c>/* RGB range 0%-100% */</c->
</pre>
   </div>
   <dl>
    <dt><a class="production css" data-link-type="type" href="#typedef-color" id="ref-for-typedef-color③" title="Expands to: indigo | gold | firebrick | indianred | yellow | darkolivegreen | darkseagreen | slategrey | darkslategrey | mediumvioletred | mediumorchid | transparent | chartreuse | mediumslateblue | black | springgreen | crimson | lightsalmon | brown | turquoise | olivedrab | cyan | silver | skyblue | gray | darkturquoise | goldenrod | darkgreen | darkviolet | darkgray | lightpink | teal | darkmagenta | lightgoldenrodyellow | lavender | yellowgreen | thistle | violet | navy | dimgrey | orchid | blue | ghostwhite | honeydew | cornflowerblue | darkblue | darkkhaki | mediumpurple | cornsilk | red | bisque | slategray | darkcyan | khaki | wheat | deepskyblue | rebeccapurple | darkred | steelblue | aliceblue | lightslategrey | gainsboro | mediumturquoise | floralwhite | coral | purple | lightgrey | lightcyan | darksalmon | beige | azure | lightsteelblue | oldlace | greenyellow | royalblue | lightseagreen | mistyrose | sienna | lightcoral | orangered | navajowhite | lime | palegreen | burlywood | seashell | mediumspringgreen | fuchsia | papayawhip | blanchedalmond | peru | aquamarine | white | darkslategray | tomato | ivory | dodgerblue | currentcolor | lemonchiffon | chocolate | orange | forestgreen | darkgrey | olive | mintcream | antiquewhite | darkorange | cadetblue | moccasin | limegreen | saddlebrown | grey | darkslateblue | lightskyblue | deeppink | plum | aqua | darkgoldenrod | maroon | sandybrown | magenta | tan | rosybrown | pink | lightblue | palevioletred | mediumseagreen | slateblue | dimgray | powderblue | seagreen | snow | mediumblue | midnightblue | paleturquoise | palegoldenrod | whitesmoke | darkorchid | salmon | lightslategray | lawngreen | lightgreen | lightgray | hotpink | lightyellow | lavenderblush | linen | mediumaquamarine | green | blueviolet | peachpuff">&lt;color></a> 
    <dd>The <a class="production css" data-link-type="type" href="#typedef-color" id="ref-for-typedef-color④" title="Expands to: indigo | gold | firebrick | indianred | yellow | darkolivegreen | darkseagreen | slategrey | darkslategrey | mediumvioletred | mediumorchid | transparent | chartreuse | mediumslateblue | black | springgreen | crimson | lightsalmon | brown | turquoise | olivedrab | cyan | silver | skyblue | gray | darkturquoise | goldenrod | darkgreen | darkviolet | darkgray | lightpink | teal | darkmagenta | lightgoldenrodyellow | lavender | yellowgreen | thistle | violet | navy | dimgrey | orchid | blue | ghostwhite | honeydew | cornflowerblue | darkblue | darkkhaki | mediumpurple | cornsilk | red | bisque | slategray | darkcyan | khaki | wheat | deepskyblue | rebeccapurple | darkred | steelblue | aliceblue | lightslategrey | gainsboro | mediumturquoise | floralwhite | coral | purple | lightgrey | lightcyan | darksalmon | beige | azure | lightsteelblue | oldlace | greenyellow | royalblue | lightseagreen | mistyrose | sienna | lightcoral | orangered | navajowhite | lime | palegreen | burlywood | seashell | mediumspringgreen | fuchsia | papayawhip | blanchedalmond | peru | aquamarine | white | darkslategray | tomato | ivory | dodgerblue | currentcolor | lemonchiffon | chocolate | orange | forestgreen | darkgrey | olive | mintcream | antiquewhite | darkorange | cadetblue | moccasin | limegreen | saddlebrown | grey | darkslateblue | lightskyblue | deeppink | plum | aqua | darkgoldenrod | maroon | sandybrown | magenta | tan | rosybrown | pink | lightblue | palevioletred | mediumseagreen | slateblue | dimgray | powderblue | seagreen | snow | mediumblue | midnightblue | paleturquoise | palegoldenrod | whitesmoke | darkorchid | salmon | lightslategray | lawngreen | lightgreen | lightgray | hotpink | lightyellow | lavenderblush | linen | mediumaquamarine | green | blueviolet | peachpuff">&lt;color></a> type is defined in a later section. 
   </dl>
   <p class="note" role="note"> Note: In general, this property, including its alpha component, has
    no effect on "color glyphs", such as emoji in some fonts, which are
    colored by a built-in palette. Some colored fonts are able to refer
    to the foreground color, such as palette entry <span class="css">0xFFFF</span> in COLR
    table of OpenType, and <span class="css">context-fill</span> value in SVG-in-OpenType. In
    that case, the foreground color is set by this property, identical
    to how <a class="css" data-link-type="maybe" href="#valdef-color-currentcolor" id="ref-for-valdef-color-currentcolor①">currentcolor</a> value works. </p>
   <h2 class="heading settled" data-level="4" id="color-type"><span class="secno">4. </span><span class="content"> Representing Colors: the <a class="production css" data-link-type="type" href="#typedef-color" id="ref-for-typedef-color⑤" title="Expands to: indigo | gold | firebrick | indianred | yellow | darkolivegreen | darkseagreen | slategrey | darkslategrey | mediumvioletred | mediumorchid | transparent | chartreuse | mediumslateblue | black | springgreen | crimson | lightsalmon | brown | turquoise | olivedrab | cyan | silver | skyblue | gray | darkturquoise | goldenrod | darkgreen | darkviolet | darkgray | lightpink | teal | darkmagenta | lightgoldenrodyellow | lavender | yellowgreen | thistle | violet | navy | dimgrey | orchid | blue | ghostwhite | honeydew | cornflowerblue | darkblue | darkkhaki | mediumpurple | cornsilk | red | bisque | slategray | darkcyan | khaki | wheat | deepskyblue | rebeccapurple | darkred | steelblue | aliceblue | lightslategrey | gainsboro | mediumturquoise | floralwhite | coral | purple | lightgrey | lightcyan | darksalmon | beige | azure | lightsteelblue | oldlace | greenyellow | royalblue | lightseagreen | mistyrose | sienna | lightcoral | orangered | navajowhite | lime | palegreen | burlywood | seashell | mediumspringgreen | fuchsia | papayawhip | blanchedalmond | peru | aquamarine | white | darkslategray | tomato | ivory | dodgerblue | currentcolor | lemonchiffon | chocolate | orange | forestgreen | darkgrey | olive | mintcream | antiquewhite | darkorange | cadetblue | moccasin | limegreen | saddlebrown | grey | darkslateblue | lightskyblue | deeppink | plum | aqua | darkgoldenrod | maroon | sandybrown | magenta | tan | rosybrown | pink | lightblue | palevioletred | mediumseagreen | slateblue | dimgray | powderblue | seagreen | snow | mediumblue | midnightblue | paleturquoise | palegoldenrod | whitesmoke | darkorchid | salmon | lightslategray | lawngreen | lightgreen | lightgray | hotpink | lightyellow | lavenderblush | linen | mediumaquamarine | green | blueviolet | peachpuff">&lt;color></a> type</span><a class="self-link" href="#color-type"></a></h2>
   <p>CSS has several syntaxes for specifying color values.
	Some directly specify an sRGB color by its channels,
	such as the <a data-link-type="dfn" href="#hex-color" id="ref-for-hex-color">hex color notation</a> or <a class="css" data-link-type="maybe" href="#funcdef-rgb" id="ref-for-funcdef-rgb">rgb()</a> function.
	Others are more human-friendly to write and understand,
	such as the <a class="css" data-link-type="maybe" href="#funcdef-hsl" id="ref-for-funcdef-hsl">hsl()</a> and <a class="css" data-link-type="maybe" href="#funcdef-lch" id="ref-for-funcdef-lch">lch()</a> functions,
	or the long list of <a data-link-type="dfn" href="#named-color" id="ref-for-named-color">named colors</a>.</p>
   <p>Colors are represented as a list of components,
	also sometimes called “channels”,
	representing axises in the color space.
	Each channel has a minimum and maximum value,
	and can take any value between those two.
	Additionally, every color is accompanied by
	an <dfn data-dfn-type="dfn" data-export data-lt="alpha channel | alpha component" id="alpha-channel">alpha component<a class="self-link" href="#alpha-channel"></a></dfn>,
	indicating how transparent it is,
	and thus how much of the backdrop one can see behind the color.</p>
   <p>Colors in CSS are represented by the <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-color"><a class="production css" data-link-type="type" href="#typedef-color" id="ref-for-typedef-color⑥" title="Expands to: indigo | gold | firebrick | indianred | yellow | darkolivegreen | darkseagreen | slategrey | darkslategrey | mediumvioletred | mediumorchid | transparent | chartreuse | mediumslateblue | black | springgreen | crimson | lightsalmon | brown | turquoise | olivedrab | cyan | silver | skyblue | gray | darkturquoise | goldenrod | darkgreen | darkviolet | darkgray | lightpink | teal | darkmagenta | lightgoldenrodyellow | lavender | yellowgreen | thistle | violet | navy | dimgrey | orchid | blue | ghostwhite | honeydew | cornflowerblue | darkblue | darkkhaki | mediumpurple | cornsilk | red | bisque | slategray | darkcyan | khaki | wheat | deepskyblue | rebeccapurple | darkred | steelblue | aliceblue | lightslategrey | gainsboro | mediumturquoise | floralwhite | coral | purple | lightgrey | lightcyan | darksalmon | beige | azure | lightsteelblue | oldlace | greenyellow | royalblue | lightseagreen | mistyrose | sienna | lightcoral | orangered | navajowhite | lime | palegreen | burlywood | seashell | mediumspringgreen | fuchsia | papayawhip | blanchedalmond | peru | aquamarine | white | darkslategray | tomato | ivory | dodgerblue | currentcolor | lemonchiffon | chocolate | orange | forestgreen | darkgrey | olive | mintcream | antiquewhite | darkorange | cadetblue | moccasin | limegreen | saddlebrown | grey | darkslateblue | lightskyblue | deeppink | plum | aqua | darkgoldenrod | maroon | sandybrown | magenta | tan | rosybrown | pink | lightblue | palevioletred | mediumseagreen | slateblue | dimgray | powderblue | seagreen | snow | mediumblue | midnightblue | paleturquoise | palegoldenrod | whitesmoke | darkorchid | salmon | lightslategray | lawngreen | lightgreen | lightgray | hotpink | lightyellow | lavenderblush | linen | mediumaquamarine | green | blueviolet | peachpuff">&lt;color></a></dfn> type:</p>
<pre class="prod">&lt;color> = <a class="production" data-link-type="type" href="#typedef-hex-color" id="ref-for-typedef-hex-color">&lt;hex-color></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one">|</a> <a class="production" data-link-type="type" href="#typedef-named-color" id="ref-for-typedef-named-color">&lt;named-color></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①">|</a> currentcolor <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②">|</a> transparent
          <a class="production" data-link-type="function" href="#funcdef-rgb" id="ref-for-funcdef-rgb①">&lt;rgb()></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one③">|</a> <a class="production" data-link-type="function" href="#funcdef-rgba" id="ref-for-funcdef-rgba">&lt;rgba()></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④">|</a> <a class="production" data-link-type="function" href="#funcdef-hsl" id="ref-for-funcdef-hsl①">&lt;hsl()></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑤">|</a> <a class="production" data-link-type="function" href="#funcdef-hsla" id="ref-for-funcdef-hsla">&lt;hsla()></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑥">|</a> <a class="production" data-link-type="function" href="#funcdef-hwb" id="ref-for-funcdef-hwb">&lt;hwb()></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑦">|</a>
          <a class="production" data-link-type="function" href="#funcdef-lab" id="ref-for-funcdef-lab">&lt;lab()></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑧">|</a> <a class="production" data-link-type="function" href="#funcdef-lch" id="ref-for-funcdef-lch①">&lt;lch()></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑨">|</a>
          <a class="production" data-link-type="function" href="#funcdef-color" id="ref-for-funcdef-color">&lt;color()></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⓪">|</a> <a class="production" data-link-type="function" href="#funcdef-device-cmyk" id="ref-for-funcdef-device-cmyk">&lt;device-cmyk()></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①①">|</a>
          <a class="production" data-link-type="type" href="#typedef-system-color" id="ref-for-typedef-system-color" title="Expands to: visitedtext | activetext | canvas | canvastext | graytext | buttontext | buttonface | fieldtext | field | linktext | highlighttext | highlight">&lt;system-color></a>
</pre>
   <p>For easy reference in other specifications, <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="opaque-black">opaque black</dfn> is defined as the color <span style=";white-space:nowrap"><span class="css">rgb(0 0 0 / 100%)</span></span>; <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="transparent-black">transparent black</dfn> is the same color,
	but fully transparent—<wbr>i.e. <span style=";white-space:nowrap"><span class="css">rgb(0 0 0 / 0%)</span></span>.</p>
   <h3 class="heading settled" data-level="4.1" id="notes"><span class="secno">4.1. </span><span class="content"> Accessibility and Conveying Information By Color</span><a class="self-link" href="#notes"></a></h3>
   <p>Although colors can add significant information to documents
	and make them more readable,
	color by itself should not be the sole means to convey important information.
	Authors should consider the W3C Web Content Accessibility Guidelines <a data-link-type="biblio" href="#biblio-wcag20">[WCAG20]</a> when using color in their documents.</p>
   <blockquote>
    <p><a href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-without-color"><em>1.4.1 Use of Color:</em> Color is not used as the only visual means of conveying information,
indicating an action, prompting a response, or distinguishing a visual element</a></p>
   </blockquote>
   <h3 class="heading settled" data-level="4.2" id="untagged"><span class="secno">4.2. </span><span class="content"> Color Spaces of Untagged Colors</span><a class="self-link" href="#untagged"></a></h3>
   <p>Colors specified in HTML and <a data-link-type="dfn" href="#untagged-image" id="ref-for-untagged-image">untagged images</a> are in the sRGB color space (<a data-link-type="biblio" href="#biblio-srgb">[SRGB]</a>)
	unless otherwise specified.</p>
   <p>An <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="untagged-image">untagged image</dfn> is an image that is not explicitly assigned a color profile, as defined by the image format.</p>
   <p>Note that this rule does not apply to videos, since untagged video should be presumed to be in ITU.</p>
   <ul>
    <li data-md>
     <p>At below 720p, it is Recommendation ITU-R BT.601 <a data-link-type="biblio" href="#biblio-itu-r-bt601">[ITU-R-BT.601]</a></p>
    <li data-md>
     <p>At 720p, it is SMPTE ST 296 (same colorimetry as 709) <a data-link-type="biblio" href="#biblio-smpte296">[SMPTE296]</a></p>
    <li data-md>
     <p>At 1080p, it is Recommendation ITU-R BT.709 <a data-link-type="biblio" href="#biblio-itu-r-bt709">[ITU-R-BT.709]</a></p>
   </ul>
   <h3 class="heading settled" data-level="4.3" id="resolving-color-values"><span class="secno">4.3. </span><span class="content"> Resolving <a class="production css" data-link-type="type" href="#typedef-color" id="ref-for-typedef-color⑦" title="Expands to: indigo | gold | firebrick | indianred | yellow | darkolivegreen | darkseagreen | slategrey | darkslategrey | mediumvioletred | mediumorchid | transparent | chartreuse | mediumslateblue | black | springgreen | crimson | lightsalmon | brown | turquoise | olivedrab | cyan | silver | skyblue | gray | darkturquoise | goldenrod | darkgreen | darkviolet | darkgray | lightpink | teal | darkmagenta | lightgoldenrodyellow | lavender | yellowgreen | thistle | violet | navy | dimgrey | orchid | blue | ghostwhite | honeydew | cornflowerblue | darkblue | darkkhaki | mediumpurple | cornsilk | red | bisque | slategray | darkcyan | khaki | wheat | deepskyblue | rebeccapurple | darkred | steelblue | aliceblue | lightslategrey | gainsboro | mediumturquoise | floralwhite | coral | purple | lightgrey | lightcyan | darksalmon | beige | azure | lightsteelblue | oldlace | greenyellow | royalblue | lightseagreen | mistyrose | sienna | lightcoral | orangered | navajowhite | lime | palegreen | burlywood | seashell | mediumspringgreen | fuchsia | papayawhip | blanchedalmond | peru | aquamarine | white | darkslategray | tomato | ivory | dodgerblue | currentcolor | lemonchiffon | chocolate | orange | forestgreen | darkgrey | olive | mintcream | antiquewhite | darkorange | cadetblue | moccasin | limegreen | saddlebrown | grey | darkslateblue | lightskyblue | deeppink | plum | aqua | darkgoldenrod | maroon | sandybrown | magenta | tan | rosybrown | pink | lightblue | palevioletred | mediumseagreen | slateblue | dimgray | powderblue | seagreen | snow | mediumblue | midnightblue | paleturquoise | palegoldenrod | whitesmoke | darkorchid | salmon | lightslategray | lawngreen | lightgreen | lightgray | hotpink | lightyellow | lavenderblush | linen | mediumaquamarine | green | blueviolet | peachpuff">&lt;color></a> Values</span><a class="self-link" href="#resolving-color-values"></a></h3>
   <p>Unless otherwise specified for a particular property, <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#specified-value" id="ref-for-specified-value">specified</a> colors are resolved to <dfn data-dfn-type="dfn" data-export data-lt="computed color" id="computed-color"><a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value">computed</a> colors<a class="self-link" href="#computed-color"></a></dfn> and then further to <dfn data-dfn-type="dfn" data-export data-lt="used color" id="used-color"><a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#used-value" id="ref-for-used-value">used</a> colors<a class="self-link" href="#used-color"></a></dfn> as follows:</p>
   <dl>
    <dt data-md><a class="css" data-link-type="maybe" href="#valdef-color-transparent" id="ref-for-valdef-color-transparent">transparent</a>
    <dd data-md>
     <p>The computed and used value is <a data-link-type="dfn" href="#transparent-black" id="ref-for-transparent-black">transparent black</a>.</p>
    <dt data-md><a data-link-type="dfn" href="#hex-color" id="ref-for-hex-color①">hex colors</a>
    <dt data-md><a class="css" data-link-type="maybe" href="#funcdef-rgb" id="ref-for-funcdef-rgb②">rgb()</a> and <a class="css" data-link-type="maybe" href="#funcdef-rgba" id="ref-for-funcdef-rgba①">rgba()</a> values
    <dt data-md><a class="css" data-link-type="maybe" href="#funcdef-hsl" id="ref-for-funcdef-hsl②">hsl()</a> and <a class="css" data-link-type="maybe" href="#funcdef-hsla" id="ref-for-funcdef-hsla①">hsla()</a> values
    <dt data-md><a class="css" data-link-type="maybe" href="#funcdef-hwb" id="ref-for-funcdef-hwb①">hwb()</a> values
    <dt data-md><a data-link-type="dfn" href="#named-color" id="ref-for-named-color①">named colors</a>
    <dd data-md>
     <p>The computed and used value
is the corresponding sRGB color
paired with the specified alpha channel
(defaulting to opaque if unspecified).</p>
    <dt data-md><a class="css" data-link-type="maybe" href="#funcdef-lab" id="ref-for-funcdef-lab①">lab()</a> and <a class="css" data-link-type="maybe" href="#funcdef-lch" id="ref-for-funcdef-lch②">lch()</a> values
    <dd data-md>
     <p>The computed and used value
is the corresponding CIE Lab color
paired with the specified alpha channel
(defaulting to opaque if unspecified).</p>
     <p class="issue" id="issue-cc4164d0"><a class="self-link" href="#issue-cc4164d0"></a> Does working color space affect these values? <a href="https://github.com/w3c/csswg-drafts/issues/3844">&lt;https://github.com/w3c/csswg-drafts/issues/3844></a></p>
    <dt data-md><a class="css" data-link-type="maybe" href="#funcdef-color" id="ref-for-funcdef-color①">color()</a> values
    <dd data-md>
     <p>The computed and used value
is the color in the specified colorspace,
paired with the specified alpha channel
(defaulting to opaque if unspecified).</p>
    <dt data-md><a class="css" data-link-type="maybe" href="#funcdef-device-cmyk" id="ref-for-funcdef-device-cmyk①">device-cmyk()</a> values
    <dd data-md>
     <p>The computed and used value
is the specified device-specific CMYK color,
paired with the specified alpha channel
(defaulting to opaque if unspecified).</p>
     <p>The <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#actual-value" id="ref-for-actual-value">actual value</a> can vary based on the operation;
for rendering to a CMYK-capable device,
it may be rendered as a CMYK color;
for blending with non-CMYK colors
or rendering to a non-CMYK device,
it must be converted
as specified in <a href="#cmyk-colors">§ 12 Device-dependent CMYK Colors: the device-cmyk() function</a>.</p>
    <dt data-md><a data-link-type="dfn" href="#css-system-colors" id="ref-for-css-system-colors">system colors</a>
    <dd data-md>
     <p>Each <a class="production css" data-link-type="type" href="#typedef-system-color" id="ref-for-typedef-system-color①" title="Expands to: visitedtext | activetext | canvas | canvastext | graytext | buttontext | buttonface | fieldtext | field | linktext | highlighttext | highlight">&lt;system-color></a> keyword computes to itself.
Its used value is the corresponding color in its color space.</p>
     <p class="issue" id="issue-cd24cab1"><a class="self-link" href="#issue-cd24cab1"></a> Define something for <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-color-4/#typedef-deprecated-system-color" id="ref-for-typedef-deprecated-system-color">&lt;deprecated-system-color></a>? <a href="https://github.com/w3c/csswg-drafts/issues/3873">&lt;https://github.com/w3c/csswg-drafts/issues/3873></a></p>
    <dt data-md><a class="css" data-link-type="maybe" href="#valdef-color-currentcolor" id="ref-for-valdef-color-currentcolor②">currentcolor</a>
    <dd data-md>
     <p>The <a class="css" data-link-type="maybe" href="#valdef-color-currentcolor" id="ref-for-valdef-color-currentcolor③">currentcolor</a> keyword computes to itself.</p>
     <p>In the <a class="property" data-link-type="propdesc" href="#propdef-color" id="ref-for-propdef-color①">color</a> property,
its used value is the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#inherited-value" id="ref-for-inherited-value">inherited value</a>.
In any other property,
its used value is the used value of the <span class="property" id="ref-for-propdef-color②">color</span> property on the same element.</p>
     <p class="note" role="note"><span>Note:</span> This means that if the <a class="css" data-link-type="maybe" href="#valdef-color-currentcolor" id="ref-for-valdef-color-currentcolor④">currentcolor</a> value is inherited,
it’s inherited as a keyword,
not as the value of the <a class="property" data-link-type="propdesc" href="#propdef-color" id="ref-for-propdef-color③">color</a> property,
so descendants will use their own <span class="property" id="ref-for-propdef-color④">color</span> property to resolve it.</p>
   </dl>
   <p>The <a data-link-type="dfn" href="https://drafts.csswg.org/cssom-1/#resolved-value" id="ref-for-resolved-value">resolved value</a> of a <a class="production css" data-link-type="type" href="#typedef-color" id="ref-for-typedef-color⑧" title="Expands to: indigo | gold | firebrick | indianred | yellow | darkolivegreen | darkseagreen | slategrey | darkslategrey | mediumvioletred | mediumorchid | transparent | chartreuse | mediumslateblue | black | springgreen | crimson | lightsalmon | brown | turquoise | olivedrab | cyan | silver | skyblue | gray | darkturquoise | goldenrod | darkgreen | darkviolet | darkgray | lightpink | teal | darkmagenta | lightgoldenrodyellow | lavender | yellowgreen | thistle | violet | navy | dimgrey | orchid | blue | ghostwhite | honeydew | cornflowerblue | darkblue | darkkhaki | mediumpurple | cornsilk | red | bisque | slategray | darkcyan | khaki | wheat | deepskyblue | rebeccapurple | darkred | steelblue | aliceblue | lightslategrey | gainsboro | mediumturquoise | floralwhite | coral | purple | lightgrey | lightcyan | darksalmon | beige | azure | lightsteelblue | oldlace | greenyellow | royalblue | lightseagreen | mistyrose | sienna | lightcoral | orangered | navajowhite | lime | palegreen | burlywood | seashell | mediumspringgreen | fuchsia | papayawhip | blanchedalmond | peru | aquamarine | white | darkslategray | tomato | ivory | dodgerblue | currentcolor | lemonchiffon | chocolate | orange | forestgreen | darkgrey | olive | mintcream | antiquewhite | darkorange | cadetblue | moccasin | limegreen | saddlebrown | grey | darkslateblue | lightskyblue | deeppink | plum | aqua | darkgoldenrod | maroon | sandybrown | magenta | tan | rosybrown | pink | lightblue | palevioletred | mediumseagreen | slateblue | dimgray | powderblue | seagreen | snow | mediumblue | midnightblue | paleturquoise | palegoldenrod | whitesmoke | darkorchid | salmon | lightslategray | lawngreen | lightgreen | lightgray | hotpink | lightyellow | lavenderblush | linen | mediumaquamarine | green | blueviolet | peachpuff">&lt;color></a> is its <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#used-value" id="ref-for-used-value①">used value</a>.</p>
   <p class="issue" id="issue-8fe76086"><a class="self-link" href="#issue-8fe76086"></a> When should channel-clamping occur? <a href="https://github.com/w3c/csswg-drafts/issues/3845">&lt;https://github.com/w3c/csswg-drafts/issues/3845></a></p>
   <h2 class="heading settled" data-level="5" id="numeric-srgb"><span class="secno">5. </span><span class="content"> sRGB Colors</span><a class="self-link" href="#numeric-srgb"></a></h2>
   <p>CSS colors in the <dfn data-dfn-type="dfn" data-export id="sRGB">sRGB<a class="self-link" href="#sRGB"></a></dfn> color space
	are represented by a triplet of values—<wbr>red, green, and blue—<wbr>identifying a point in the sRGB color space <a data-link-type="biblio" href="#biblio-srgb">[SRGB]</a>.
	This is an internationally-recognized, device-independent color space,
	and so is useful for specifying colors that will be displayed on a computer screen,
	but is also useful for specifying colors on other types of devices, like printers.</p>
   <p>CSS also allows the use of non-sRGB colorspaces,
	as described in <a href="#predefined">§ 10.2 Predefined colorspaces: srgb, display-p3, a98-rgb, prophoto-rgb and rec-2020.</a>.</p>
   <p>CSS provides several methods of directly specifying an sRGB color: <a data-link-type="dfn" href="#hex-color" id="ref-for-hex-color②">hex colors</a>, <a class="css" data-link-type="maybe" href="#funcdef-rgb" id="ref-for-funcdef-rgb③">rgb()</a>/<a class="css" data-link-type="maybe" href="#funcdef-rgba" id="ref-for-funcdef-rgba②">rgba()</a> notation, <a class="css" data-link-type="maybe" href="#funcdef-hsl" id="ref-for-funcdef-hsl③">hsl()</a>/<a class="css" data-link-type="maybe" href="#funcdef-hsla" id="ref-for-funcdef-hsla②">hsla()</a> notation, <a class="css" data-link-type="maybe" href="#funcdef-hwb" id="ref-for-funcdef-hwb②">hwb()</a> notation, <a data-link-type="dfn" href="#named-color" id="ref-for-named-color②">named colors</a>,
	and the <a class="css" data-link-type="maybe" href="#valdef-color-transparent" id="ref-for-valdef-color-transparent①">transparent</a> keyword.</p>
   <h3 class="heading settled" data-level="5.1" id="rgb-functions"><span class="secno">5.1. </span><span class="content"> The RGB functions: <a class="css" data-link-type="maybe" href="#funcdef-rgb" id="ref-for-funcdef-rgb④">rgb()</a> and <a class="css" data-link-type="maybe" href="#funcdef-rgba" id="ref-for-funcdef-rgba③">rgba()</a></span><a class="self-link" href="#rgb-functions"></a></h3>
   <p>The <a class="css" data-link-type="maybe" href="#funcdef-rgb" id="ref-for-funcdef-rgb⑤">rgb()</a> function defines an sRGB color by specifying the red, green, and blue channels directly.
	Its syntax is:</p>
<pre class="prod"><dfn class="dfn-paneled" data-dfn-type="function" data-export id="funcdef-rgb">rgb()</dfn> = rgb( <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value">&lt;percentage></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num" id="ref-for-mult-num">{3}</a> [ / <a class="production" data-link-type="type" href="#typedef-alpha-value" id="ref-for-typedef-alpha-value">&lt;alpha-value></a> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt">?</a> ) <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①②">|</a>
        rgb( <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value">&lt;number></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num" id="ref-for-mult-num①">{3}</a> [ / <a class="production" data-link-type="type" href="#typedef-alpha-value" id="ref-for-typedef-alpha-value①">&lt;alpha-value></a> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt①">?</a> )
<dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-alpha-value">&lt;alpha-value></dfn> = <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value①">&lt;number></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①③">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value①">&lt;percentage></a>
</pre>
   <p>The first three arguments specify the red, green, and blue channels of the color, respectively. <span class="css">0%</span> represents the minimum value for that color channel in the sRGB gamut,
	and <span class="css">100%</span> represents the maximum value.
	A <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value②">&lt;number></a> is equivalent to a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value②">&lt;percentage></a>,
	but with a different range: <span class="css">0</span> again represents the minimum value for the color channel,
	but <span class="css">255</span> represents the maximum.
	These values come from the fact that many graphics engines store the color channels internally as a single byte,
	which can hold integers between 0 and 255.
	Implementations should honor the precision of the channel as authored or calculated wherever possible.
	If this is not possible, the channel should be rounded to the closest value at the highest precision used,
	rounding up if two values are equally close.</p>
   <p>The final argument, the <a class="production css" data-link-type="type" href="#typedef-alpha-value" id="ref-for-typedef-alpha-value②">&lt;alpha-value></a>, specifies the alpha of the color.
	If given as a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value③">&lt;number></a>, the useful range of the value is <span class="css">0</span> (representing a fully transparent color)
	to <span class="css">1</span> (representing a fully opaque color).
	If given as a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value③">&lt;percentage></a>, <span class="css">0%</span> represents a fully transparent color,
	while <span class="css">100%</span> represents a fully opaque color.
	If omitted, it defaults to <span class="css">100%</span>.</p>
   <p>Values outside these ranges are not invalid,
	but are clamped to the ranges defined here at computed-value time.</p>
   <p>For legacy reasons, <a class="css" data-link-type="maybe" href="#funcdef-rgb" id="ref-for-funcdef-rgb⑥">rgb()</a> also supports an alternate syntax
	that separates all of its arguments with commas:</p>
<pre class="prod">rgb() = rgb( <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value④">&lt;percentage></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-comma" id="ref-for-mult-comma">#{3}</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-comma" id="ref-for-comb-comma">,</a> <a class="production" data-link-type="type" href="#typedef-alpha-value" id="ref-for-typedef-alpha-value③">&lt;alpha-value></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt②">?</a> ) <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①④">|</a>
        rgb( <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value④">&lt;number></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-comma" id="ref-for-mult-comma①">#{3}</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-comma" id="ref-for-comb-comma①">,</a> <a class="production" data-link-type="type" href="#typedef-alpha-value" id="ref-for-typedef-alpha-value④">&lt;alpha-value></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt③">?</a> )
</pre>
   <p>Also for legacy reasons,
	an <dfn class="dfn-paneled css" data-dfn-type="function" data-export id="funcdef-rgba">rgba()</dfn> function also exists,
	with an identical grammar and behavior to <a class="css" data-link-type="maybe" href="#funcdef-rgb" id="ref-for-funcdef-rgb⑦">rgb()</a>.</p>
   <h3 class="heading settled" data-level="5.2" id="hex-notation"><span class="secno">5.2. </span><span class="content"> The RGB hexadecimal notations: <span class="css">#RRGGBB</span></span><a class="self-link" href="#hex-notation"></a></h3>
   <p>The CSS <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="hex color | hex color notation" id="hex-color">hex color notation</dfn> allows an sRGB color to be specified by giving the channels as hexadecimal numbers,
	which is similar to how colors are often written directly in computer code.
	It’s also shorter than writing the same color out in <a class="css" data-link-type="maybe" href="#funcdef-rgb" id="ref-for-funcdef-rgb⑧">rgb()</a> notation.</p>
   <p>The syntax of a <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-hex-color">&lt;hex-color></dfn> is a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-hash-token" id="ref-for-typedef-hash-token">&lt;hash-token></a> token whose value consists of 3, 4, 6, or 8 hexadecimal digits.
	In other words, a hex color is written as a hash character, "#",
	followed by some number of digits 0-9 or letters a-f
	(the case of the letters doesn’t matter - <span class="css">#00ff00</span> is identical to <span class="css">#00FF00</span>).</p>
   <p>The number of hex digits given determines how to decode the hex notation into an RGB color:</p>
   <dl>
    <dt>6 digits 
    <dd>
      The first pair of digits, interpreted as a hexadecimal number,
			specifies the red channel of the color,
			where <span class="css">00</span> represents the minimum value
			and <span class="css">ff</span> (255 in decimal) represents the maximum.
			The next pair of digits, interpreted in the same way,
			specifies the green channel,
			and the last pair specifies the blue.
			The alpha channel of the color is fully opaque. 
     <div class="example" id="example-5460df7f"><a class="self-link" href="#example-5460df7f"></a> In other words, <span class="css">#00ff00</span> represents the same color as <span class="css">rgb(0 255 0)</span> (a lime green). </div>
    <dt>8 digits 
    <dd>
      The first 6 digits are interpreted identically to the 6-digit notation.
			The last pair of digits, interpreted as a hexadecimal number,
			specifies the alpha channel of the color,
			where <span class="css">00</span> represents a fully transparent color
			and <span class="css">ff</span> represent a fully opaque color. 
     <div class="example" id="example-e60892a9"><a class="self-link" href="#example-e60892a9"></a> In other words, <span class="css">#0000ffcc</span> represents the same color as <span class="css">rgb(0 0 100% / 80%)</span> (a slightly-transparent blue). </div>
    <dt>3 digits 
    <dd>
      This is a shorter variant of the 6-digit notation.
			The first digit, interpreted as a hexadecimal number,
			specifies the red channel of the color,
			where <span class="css">0</span> represents the minimum value
			and <span class="css">f</span> represents the maximum.
			The next two digits represent the green and blue channels, respectively,
			in the same way.
			The alpha channel of the color is fully opaque. 
     <div class="example" id="example-49b19e9b"><a class="self-link" href="#example-49b19e9b"></a> This syntax is often explained by saying that it’s identical to a 6-digit notation obtained by "duplicating" all of the digits.
				For example, the notation <span class="css">#123</span> specifies the same color as the notation <span class="css">#112233</span>.
				This method of specifying a color has lower "resolution" than the 6-digit notation;
				there are only 4096 possible colors expressible in the 3-digit hex syntax,
				as opposed to approximately 17 million in 6-digit hex syntax. </div>
    <dt>4 digits 
    <dd> This is a shorter variant of the 8-digit notation,
			"expanded" in the same way as the 3-digit notation is.
			The first digit, interpreted as a hexadecimal number,
			specifies the red channel of the color,
			where <span class="css">0</span> represents the minimum value
			and <span class="css">f</span> represents the maximum.
			The next three digits represent the green, blue, and alpha channels, respectively. 
   </dl>
   <h2 class="heading settled" data-level="6" id="color-keywords"><span class="secno">6. </span><span class="content"> Color Keywords</span><a class="self-link" href="#color-keywords"></a></h2>
   <p>In addition to the various numeric syntaxes for <a class="production css" data-link-type="type" href="#typedef-color" id="ref-for-typedef-color⑨" title="Expands to: indigo | gold | firebrick | indianred | yellow | darkolivegreen | darkseagreen | slategrey | darkslategrey | mediumvioletred | mediumorchid | transparent | chartreuse | mediumslateblue | black | springgreen | crimson | lightsalmon | brown | turquoise | olivedrab | cyan | silver | skyblue | gray | darkturquoise | goldenrod | darkgreen | darkviolet | darkgray | lightpink | teal | darkmagenta | lightgoldenrodyellow | lavender | yellowgreen | thistle | violet | navy | dimgrey | orchid | blue | ghostwhite | honeydew | cornflowerblue | darkblue | darkkhaki | mediumpurple | cornsilk | red | bisque | slategray | darkcyan | khaki | wheat | deepskyblue | rebeccapurple | darkred | steelblue | aliceblue | lightslategrey | gainsboro | mediumturquoise | floralwhite | coral | purple | lightgrey | lightcyan | darksalmon | beige | azure | lightsteelblue | oldlace | greenyellow | royalblue | lightseagreen | mistyrose | sienna | lightcoral | orangered | navajowhite | lime | palegreen | burlywood | seashell | mediumspringgreen | fuchsia | papayawhip | blanchedalmond | peru | aquamarine | white | darkslategray | tomato | ivory | dodgerblue | currentcolor | lemonchiffon | chocolate | orange | forestgreen | darkgrey | olive | mintcream | antiquewhite | darkorange | cadetblue | moccasin | limegreen | saddlebrown | grey | darkslateblue | lightskyblue | deeppink | plum | aqua | darkgoldenrod | maroon | sandybrown | magenta | tan | rosybrown | pink | lightblue | palevioletred | mediumseagreen | slateblue | dimgray | powderblue | seagreen | snow | mediumblue | midnightblue | paleturquoise | palegoldenrod | whitesmoke | darkorchid | salmon | lightslategray | lawngreen | lightgreen | lightgray | hotpink | lightyellow | lavenderblush | linen | mediumaquamarine | green | blueviolet | peachpuff">&lt;color></a>s,
	CSS defines several sets of color keywords that can be used instead—<wbr>each with their own advantages or use cases.</p>
   <h3 class="heading settled" data-level="6.1" id="named-colors"><span class="secno">6.1. </span><span class="content"> Named Colors</span><a class="self-link" href="#named-colors"></a></h3>
   <p>CSS defines a large set of <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="named color" id="named-color">named colors</dfn>,
	so that common colors can be written and read more easily.
	A <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-named-color">&lt;named-color></dfn> is written as an <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-ident" id="ref-for-typedef-ident">&lt;ident></a>,
	accepted anywhere a <a class="production css" data-link-type="type" href="#typedef-color" id="ref-for-typedef-color①⓪" title="Expands to: indigo | gold | firebrick | indianred | yellow | darkolivegreen | darkseagreen | slategrey | darkslategrey | mediumvioletred | mediumorchid | transparent | chartreuse | mediumslateblue | black | springgreen | crimson | lightsalmon | brown | turquoise | olivedrab | cyan | silver | skyblue | gray | darkturquoise | goldenrod | darkgreen | darkviolet | darkgray | lightpink | teal | darkmagenta | lightgoldenrodyellow | lavender | yellowgreen | thistle | violet | navy | dimgrey | orchid | blue | ghostwhite | honeydew | cornflowerblue | darkblue | darkkhaki | mediumpurple | cornsilk | red | bisque | slategray | darkcyan | khaki | wheat | deepskyblue | rebeccapurple | darkred | steelblue | aliceblue | lightslategrey | gainsboro | mediumturquoise | floralwhite | coral | purple | lightgrey | lightcyan | darksalmon | beige | azure | lightsteelblue | oldlace | greenyellow | royalblue | lightseagreen | mistyrose | sienna | lightcoral | orangered | navajowhite | lime | palegreen | burlywood | seashell | mediumspringgreen | fuchsia | papayawhip | blanchedalmond | peru | aquamarine | white | darkslategray | tomato | ivory | dodgerblue | currentcolor | lemonchiffon | chocolate | orange | forestgreen | darkgrey | olive | mintcream | antiquewhite | darkorange | cadetblue | moccasin | limegreen | saddlebrown | grey | darkslateblue | lightskyblue | deeppink | plum | aqua | darkgoldenrod | maroon | sandybrown | magenta | tan | rosybrown | pink | lightblue | palevioletred | mediumseagreen | slateblue | dimgray | powderblue | seagreen | snow | mediumblue | midnightblue | paleturquoise | palegoldenrod | whitesmoke | darkorchid | salmon | lightslategray | lawngreen | lightgreen | lightgray | hotpink | lightyellow | lavenderblush | linen | mediumaquamarine | green | blueviolet | peachpuff">&lt;color></a> is.
	As usual for CSS-defined <span class="production" id="ref-for-typedef-ident①">&lt;ident></span>s,
	all of these keywords are case-insensitive.</p>
   <p>The names resolve to colors in sRGB.</p>
   <p>16 of CSS’s named colors come from HTML originally:
	aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.
	Most of the rest
	come from one version of the X11 color system,
	used in Unix-derived systems to specify colors for the console.
	(Two special color values, <a class="css" data-link-type="maybe" href="#valdef-color-transparent" id="ref-for-valdef-color-transparent②">transparent</a> and <a class="css" data-link-type="maybe" href="#valdef-color-currentcolor" id="ref-for-valdef-color-currentcolor⑤">currentcolor</a>,
		are specially defined in their own sections.)</p>
   <p>The following table defines all of the opaque named colors,
	by giving equivalent numeric specifications in the other color syntaxes.</p>
   <table class="named-color-table">
    <thead>
     <tr>
      <th style="background:black">Named 
      <th>Numeric 
      <th>Color name 
      <th>Hex rgb 
      <th>Decimal 
    <tbody>
     <tr>
      <td style="background:aliceblue">
      <td style="background:#f0f8ff">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-aliceblue">aliceblue<a class="self-link" href="#valdef-color-aliceblue"></a></dfn>
      <td>#f0f8ff
      <td>240 248 255 
     <tr>
      <td style="background:antiquewhite">
      <td style="background:#faebd7">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-antiquewhite">antiquewhite<a class="self-link" href="#valdef-color-antiquewhite"></a></dfn>
      <td>#faebd7
      <td>250 235 215 
     <tr>
      <td style="background:aqua">
      <td style="background:#00ffff">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-aqua">aqua<a class="self-link" href="#valdef-color-aqua"></a></dfn>
      <td>#00ffff
      <td>0 255 255 
     <tr>
      <td style="background:aquamarine">
      <td style="background:#7fffd4">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-aquamarine">aquamarine<a class="self-link" href="#valdef-color-aquamarine"></a></dfn>
      <td>#7fffd4
      <td>127 255 212 
     <tr>
      <td style="background:azure">
      <td style="background:#f0ffff">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-azure">azure<a class="self-link" href="#valdef-color-azure"></a></dfn>
      <td>#f0ffff
      <td>240 255 255 
     <tr>
      <td style="background:beige">
      <td style="background:#f5f5dc">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-beige">beige<a class="self-link" href="#valdef-color-beige"></a></dfn>
      <td>#f5f5dc
      <td>245 245 220 
     <tr>
      <td style="background:bisque">
      <td style="background:#ffe4c4">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-bisque">bisque<a class="self-link" href="#valdef-color-bisque"></a></dfn>
      <td>#ffe4c4
      <td>255 228 196 
     <tr>
      <td style="background:black">
      <td style="background:#000000">
      <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-black">black</dfn>
      <td>#000000
      <td>0 0 0 
     <tr>
      <td style="background:blanchedalmond">
      <td style="background:#ffebcd">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-blanchedalmond">blanchedalmond<a class="self-link" href="#valdef-color-blanchedalmond"></a></dfn>
      <td>#ffebcd
      <td>255 235 205 
     <tr>
      <td style="background:blue">
      <td style="background:#0000ff">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-blue">blue<a class="self-link" href="#valdef-color-blue"></a></dfn>
      <td>#0000ff
      <td>0 0 255 
     <tr>
      <td style="background:blueviolet">
      <td style="background:#8a2be2">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-blueviolet">blueviolet<a class="self-link" href="#valdef-color-blueviolet"></a></dfn>
      <td>#8a2be2
      <td>138 43 226 
     <tr>
      <td style="background:brown">
      <td style="background:#a52a2a">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-brown">brown<a class="self-link" href="#valdef-color-brown"></a></dfn>
      <td>#a52a2a
      <td>165 42 42 
     <tr>
      <td style="background:burlywood">
      <td style="background:#deb887">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-burlywood">burlywood<a class="self-link" href="#valdef-color-burlywood"></a></dfn>
      <td>#deb887
      <td>222 184 135 
     <tr>
      <td style="background:cadetblue">
      <td style="background:#5f9ea0">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-cadetblue">cadetblue<a class="self-link" href="#valdef-color-cadetblue"></a></dfn>
      <td>#5f9ea0
      <td>95 158 160 
     <tr>
      <td style="background:chartreuse">
      <td style="background:#7fff00">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-chartreuse">chartreuse<a class="self-link" href="#valdef-color-chartreuse"></a></dfn>
      <td>#7fff00
      <td>127 255 0 
     <tr>
      <td style="background:chocolate">
      <td style="background:#d2691e">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-chocolate">chocolate<a class="self-link" href="#valdef-color-chocolate"></a></dfn>
      <td>#d2691e
      <td>210 105 30 
     <tr>
      <td style="background:coral">
      <td style="background:#ff7f50">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-coral">coral<a class="self-link" href="#valdef-color-coral"></a></dfn>
      <td>#ff7f50
      <td>255 127 80 
     <tr>
      <td style="background:cornflowerblue">
      <td style="background:#6495ed">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-cornflowerblue">cornflowerblue<a class="self-link" href="#valdef-color-cornflowerblue"></a></dfn>
      <td>#6495ed
      <td>100 149 237 
     <tr>
      <td style="background:cornsilk">
      <td style="background:#fff8dc">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-cornsilk">cornsilk<a class="self-link" href="#valdef-color-cornsilk"></a></dfn>
      <td>#fff8dc
      <td>255 248 220 
     <tr>
      <td style="background:crimson">
      <td style="background:#dc143c">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-crimson">crimson<a class="self-link" href="#valdef-color-crimson"></a></dfn>
      <td>#dc143c
      <td>220 20 60 
     <tr>
      <td style="background:cyan">
      <td style="background:#00ffff">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-cyan">cyan<a class="self-link" href="#valdef-color-cyan"></a></dfn>
      <td>#00ffff
      <td>0 255 255 
     <tr>
      <td style="background:darkblue">
      <td style="background:#00008b">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-darkblue">darkblue<a class="self-link" href="#valdef-color-darkblue"></a></dfn>
      <td>#00008b
      <td>0 0 139 
     <tr>
      <td style="background:darkcyan">
      <td style="background:#008b8b">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-darkcyan">darkcyan<a class="self-link" href="#valdef-color-darkcyan"></a></dfn>
      <td>#008b8b
      <td>0 139 139 
     <tr>
      <td style="background:darkgoldenrod">
      <td style="background:#b8860b">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-darkgoldenrod">darkgoldenrod<a class="self-link" href="#valdef-color-darkgoldenrod"></a></dfn>
      <td>#b8860b
      <td>184 134 11 
     <tr>
      <td style="background:darkgray">
      <td style="background:#a9a9a9">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-darkgray">darkgray<a class="self-link" href="#valdef-color-darkgray"></a></dfn>
      <td>#a9a9a9
      <td>169 169 169 
     <tr>
      <td style="background:darkgreen">
      <td style="background:#006400">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-darkgreen">darkgreen<a class="self-link" href="#valdef-color-darkgreen"></a></dfn>
      <td>#006400
      <td>0 100 0 
     <tr>
      <td style="background:darkgrey">
      <td style="background:#a9a9a9">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-darkgrey">darkgrey<a class="self-link" href="#valdef-color-darkgrey"></a></dfn>
      <td>#a9a9a9
      <td>169 169 169 
     <tr>
      <td style="background:darkkhaki">
      <td style="background:#bdb76b">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-darkkhaki">darkkhaki<a class="self-link" href="#valdef-color-darkkhaki"></a></dfn>
      <td>#bdb76b
      <td>189 183 107 
     <tr>
      <td style="background:darkmagenta">
      <td style="background:#8b008b">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-darkmagenta">darkmagenta<a class="self-link" href="#valdef-color-darkmagenta"></a></dfn>
      <td>#8b008b
      <td>139 0 139 
     <tr>
      <td style="background:darkolivegreen">
      <td style="background:#556b2f">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-darkolivegreen">darkolivegreen<a class="self-link" href="#valdef-color-darkolivegreen"></a></dfn>
      <td>#556b2f
      <td>85 107 47 
     <tr>
      <td style="background:darkorange">
      <td style="background:#ff8c00">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-darkorange">darkorange<a class="self-link" href="#valdef-color-darkorange"></a></dfn>
      <td>#ff8c00
      <td>255 140 0 
     <tr>
      <td style="background:darkorchid">
      <td style="background:#9932cc">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-darkorchid">darkorchid<a class="self-link" href="#valdef-color-darkorchid"></a></dfn>
      <td>#9932cc
      <td>153 50 204 
     <tr>
      <td style="background:darkred">
      <td style="background:#8b0000">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-darkred">darkred<a class="self-link" href="#valdef-color-darkred"></a></dfn>
      <td>#8b0000
      <td>139 0 0 
     <tr>
      <td style="background:darksalmon">
      <td style="background:#e9967a">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-darksalmon">darksalmon<a class="self-link" href="#valdef-color-darksalmon"></a></dfn>
      <td>#e9967a
      <td>233 150 122 
     <tr>
      <td style="background:darkseagreen">
      <td style="background:#8fbc8f">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-darkseagreen">darkseagreen<a class="self-link" href="#valdef-color-darkseagreen"></a></dfn>
      <td>#8fbc8f
      <td>143 188 143 
     <tr>
      <td style="background:darkslateblue">
      <td style="background:#483d8b">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-darkslateblue">darkslateblue<a class="self-link" href="#valdef-color-darkslateblue"></a></dfn>
      <td>#483d8b
      <td>72 61 139 
     <tr>
      <td style="background:darkslategray">
      <td style="background:#2f4f4f">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-darkslategray">darkslategray<a class="self-link" href="#valdef-color-darkslategray"></a></dfn>
      <td>#2f4f4f
      <td>47 79 79 
     <tr>
      <td style="background:darkslategrey">
      <td style="background:#2f4f4f">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-darkslategrey">darkslategrey<a class="self-link" href="#valdef-color-darkslategrey"></a></dfn>
      <td>#2f4f4f
      <td>47 79 79 
     <tr>
      <td style="background:darkturquoise">
      <td style="background:#00ced1">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-darkturquoise">darkturquoise<a class="self-link" href="#valdef-color-darkturquoise"></a></dfn>
      <td>#00ced1
      <td>0 206 209 
     <tr>
      <td style="background:darkviolet">
      <td style="background:#9400d3">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-darkviolet">darkviolet<a class="self-link" href="#valdef-color-darkviolet"></a></dfn>
      <td>#9400d3
      <td>148 0 211 
     <tr>
      <td style="background:deeppink">
      <td style="background:#ff1493">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-deeppink">deeppink<a class="self-link" href="#valdef-color-deeppink"></a></dfn>
      <td>#ff1493
      <td>255 20 147 
     <tr>
      <td style="background:deepskyblue">
      <td style="background:#00bfff">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-deepskyblue">deepskyblue<a class="self-link" href="#valdef-color-deepskyblue"></a></dfn>
      <td>#00bfff
      <td>0 191 255 
     <tr>
      <td style="background:dimgray">
      <td style="background:#696969">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-dimgray">dimgray<a class="self-link" href="#valdef-color-dimgray"></a></dfn>
      <td>#696969
      <td>105 105 105 
     <tr>
      <td style="background:dimgrey">
      <td style="background:#696969">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-dimgrey">dimgrey<a class="self-link" href="#valdef-color-dimgrey"></a></dfn>
      <td>#696969
      <td>105 105 105 
     <tr>
      <td style="background:dodgerblue">
      <td style="background:#1e90ff">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-dodgerblue">dodgerblue<a class="self-link" href="#valdef-color-dodgerblue"></a></dfn>
      <td>#1e90ff
      <td>30 144 255 
     <tr>
      <td style="background:firebrick">
      <td style="background:#b22222">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-firebrick">firebrick<a class="self-link" href="#valdef-color-firebrick"></a></dfn>
      <td>#b22222
      <td>178 34 34 
     <tr>
      <td style="background:floralwhite">
      <td style="background:#fffaf0">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-floralwhite">floralwhite<a class="self-link" href="#valdef-color-floralwhite"></a></dfn>
      <td>#fffaf0
      <td>255 250 240 
     <tr>
      <td style="background:forestgreen">
      <td style="background:#228b22">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-forestgreen">forestgreen<a class="self-link" href="#valdef-color-forestgreen"></a></dfn>
      <td>#228b22
      <td>34 139 34 
     <tr>
      <td style="background:fuchsia">
      <td style="background:#ff00ff">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-fuchsia">fuchsia<a class="self-link" href="#valdef-color-fuchsia"></a></dfn>
      <td>#ff00ff
      <td>255 0 255 
     <tr>
      <td style="background:gainsboro">
      <td style="background:#dcdcdc">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-gainsboro">gainsboro<a class="self-link" href="#valdef-color-gainsboro"></a></dfn>
      <td>#dcdcdc
      <td>220 220 220 
     <tr>
      <td style="background:ghostwhite">
      <td style="background:#f8f8ff">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-ghostwhite">ghostwhite<a class="self-link" href="#valdef-color-ghostwhite"></a></dfn>
      <td>#f8f8ff
      <td>248 248 255 
     <tr>
      <td style="background:gold">
      <td style="background:#ffd700">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-gold">gold<a class="self-link" href="#valdef-color-gold"></a></dfn>
      <td>#ffd700
      <td>255 215 0 
     <tr>
      <td style="background:goldenrod">
      <td style="background:#daa520">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-goldenrod">goldenrod<a class="self-link" href="#valdef-color-goldenrod"></a></dfn>
      <td>#daa520
      <td>218 165 32 
     <tr>
      <td style="background:gray">
      <td style="background:#808080">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-gray">gray<a class="self-link" href="#valdef-color-gray"></a></dfn>
      <td>#808080
      <td>128 128 128 
     <tr>
      <td style="background:green">
      <td style="background:#008000">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-green">green<a class="self-link" href="#valdef-color-green"></a></dfn>
      <td>#008000
      <td>0 128 0 
     <tr>
      <td style="background:greenyellow">
      <td style="background:#adff2f">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-greenyellow">greenyellow<a class="self-link" href="#valdef-color-greenyellow"></a></dfn>
      <td>#adff2f
      <td>173 255 47 
     <tr>
      <td style="background:grey">
      <td style="background:#808080">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-grey">grey<a class="self-link" href="#valdef-color-grey"></a></dfn>
      <td>#808080
      <td>128 128 128 
     <tr>
      <td style="background:honeydew">
      <td style="background:#f0fff0">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-honeydew">honeydew<a class="self-link" href="#valdef-color-honeydew"></a></dfn>
      <td>#f0fff0
      <td>240 255 240 
     <tr>
      <td style="background:hotpink">
      <td style="background:#ff69b4">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-hotpink">hotpink<a class="self-link" href="#valdef-color-hotpink"></a></dfn>
      <td>#ff69b4
      <td>255 105 180 
     <tr>
      <td style="background:indianred">
      <td style="background:#cd5c5c">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-indianred">indianred<a class="self-link" href="#valdef-color-indianred"></a></dfn>
      <td>#cd5c5c
      <td>205 92 92 
     <tr>
      <td style="background:indigo">
      <td style="background:#4b0082">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-indigo">indigo<a class="self-link" href="#valdef-color-indigo"></a></dfn>
      <td>#4b0082
      <td>75 0 130 
     <tr>
      <td style="background:ivory">
      <td style="background:#fffff0">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-ivory">ivory<a class="self-link" href="#valdef-color-ivory"></a></dfn>
      <td>#fffff0
      <td>255 255 240 
     <tr>
      <td style="background:khaki">
      <td style="background:#f0e68c">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-khaki">khaki<a class="self-link" href="#valdef-color-khaki"></a></dfn>
      <td>#f0e68c
      <td>240 230 140 
     <tr>
      <td style="background:lavender">
      <td style="background:#e6e6fa">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-lavender">lavender<a class="self-link" href="#valdef-color-lavender"></a></dfn>
      <td>#e6e6fa
      <td>230 230 250 
     <tr>
      <td style="background:lavenderblush">
      <td style="background:#fff0f5">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-lavenderblush">lavenderblush<a class="self-link" href="#valdef-color-lavenderblush"></a></dfn>
      <td>#fff0f5
      <td>255 240 245 
     <tr>
      <td style="background:lawngreen">
      <td style="background:#7cfc00">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-lawngreen">lawngreen<a class="self-link" href="#valdef-color-lawngreen"></a></dfn>
      <td>#7cfc00
      <td>124 252 0 
     <tr>
      <td style="background:lemonchiffon">
      <td style="background:#fffacd">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-lemonchiffon">lemonchiffon<a class="self-link" href="#valdef-color-lemonchiffon"></a></dfn>
      <td>#fffacd
      <td>255 250 205 
     <tr>
      <td style="background:lightblue">
      <td style="background:#add8e6">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-lightblue">lightblue<a class="self-link" href="#valdef-color-lightblue"></a></dfn>
      <td>#add8e6
      <td>173 216 230 
     <tr>
      <td style="background:lightcoral">
      <td style="background:#f08080">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-lightcoral">lightcoral<a class="self-link" href="#valdef-color-lightcoral"></a></dfn>
      <td>#f08080
      <td>240 128 128 
     <tr>
      <td style="background:lightcyan">
      <td style="background:#e0ffff">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-lightcyan">lightcyan<a class="self-link" href="#valdef-color-lightcyan"></a></dfn>
      <td>#e0ffff
      <td>224 255 255 
     <tr>
      <td style="background:lightgoldenrodyellow">
      <td style="background:#fafad2">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-lightgoldenrodyellow">lightgoldenrodyellow<a class="self-link" href="#valdef-color-lightgoldenrodyellow"></a></dfn>
      <td>#fafad2
      <td>250 250 210 
     <tr>
      <td style="background:lightgray">
      <td style="background:#d3d3d3">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-lightgray">lightgray<a class="self-link" href="#valdef-color-lightgray"></a></dfn>
      <td>#d3d3d3
      <td>211 211 211 
     <tr>
      <td style="background:lightgreen">
      <td style="background:#90ee90">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-lightgreen">lightgreen<a class="self-link" href="#valdef-color-lightgreen"></a></dfn>
      <td>#90ee90
      <td>144 238 144 
     <tr>
      <td style="background:lightgrey">
      <td style="background:#d3d3d3">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-lightgrey">lightgrey<a class="self-link" href="#valdef-color-lightgrey"></a></dfn>
      <td>#d3d3d3
      <td>211 211 211 
     <tr>
      <td style="background:lightpink">
      <td style="background:#ffb6c1">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-lightpink">lightpink<a class="self-link" href="#valdef-color-lightpink"></a></dfn>
      <td>#ffb6c1
      <td>255 182 193 
     <tr>
      <td style="background:lightsalmon">
      <td style="background:#ffa07a">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-lightsalmon">lightsalmon<a class="self-link" href="#valdef-color-lightsalmon"></a></dfn>
      <td>#ffa07a
      <td>255 160 122 
     <tr>
      <td style="background:lightseagreen">
      <td style="background:#20b2aa">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-lightseagreen">lightseagreen<a class="self-link" href="#valdef-color-lightseagreen"></a></dfn>
      <td>#20b2aa
      <td>32 178 170 
     <tr>
      <td style="background:lightskyblue">
      <td style="background:#87cefa">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-lightskyblue">lightskyblue<a class="self-link" href="#valdef-color-lightskyblue"></a></dfn>
      <td>#87cefa
      <td>135 206 250 
     <tr>
      <td style="background:lightslategray">
      <td style="background:#778899">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-lightslategray">lightslategray<a class="self-link" href="#valdef-color-lightslategray"></a></dfn>
      <td>#778899
      <td>119 136 153 
     <tr>
      <td style="background:lightslategrey">
      <td style="background:#778899">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-lightslategrey">lightslategrey<a class="self-link" href="#valdef-color-lightslategrey"></a></dfn>
      <td>#778899
      <td>119 136 153 
     <tr>
      <td style="background:lightsteelblue">
      <td style="background:#b0c4de">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-lightsteelblue">lightsteelblue<a class="self-link" href="#valdef-color-lightsteelblue"></a></dfn>
      <td>#b0c4de
      <td>176 196 222 
     <tr>
      <td style="background:lightyellow">
      <td style="background:#ffffe0">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-lightyellow">lightyellow<a class="self-link" href="#valdef-color-lightyellow"></a></dfn>
      <td>#ffffe0
      <td>255 255 224 
     <tr>
      <td style="background:lime">
      <td style="background:#00ff00">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-lime">lime<a class="self-link" href="#valdef-color-lime"></a></dfn>
      <td>#00ff00
      <td>0 255 0 
     <tr>
      <td style="background:limegreen">
      <td style="background:#32cd32">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-limegreen">limegreen<a class="self-link" href="#valdef-color-limegreen"></a></dfn>
      <td>#32cd32
      <td>50 205 50 
     <tr>
      <td style="background:linen">
      <td style="background:#faf0e6">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-linen">linen<a class="self-link" href="#valdef-color-linen"></a></dfn>
      <td>#faf0e6
      <td>250 240 230 
     <tr>
      <td style="background:magenta">
      <td style="background:#ff00ff">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-magenta">magenta<a class="self-link" href="#valdef-color-magenta"></a></dfn>
      <td>#ff00ff
      <td>255 0 255 
     <tr>
      <td style="background:maroon">
      <td style="background:#800000">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-maroon">maroon<a class="self-link" href="#valdef-color-maroon"></a></dfn>
      <td>#800000
      <td>128 0 0 
     <tr>
      <td style="background:mediumaquamarine">
      <td style="background:#66cdaa">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-mediumaquamarine">mediumaquamarine<a class="self-link" href="#valdef-color-mediumaquamarine"></a></dfn>
      <td>#66cdaa
      <td>102 205 170 
     <tr>
      <td style="background:mediumblue">
      <td style="background:#0000cd">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-mediumblue">mediumblue<a class="self-link" href="#valdef-color-mediumblue"></a></dfn>
      <td>#0000cd
      <td>0 0 205 
     <tr>
      <td style="background:mediumorchid">
      <td style="background:#ba55d3">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-mediumorchid">mediumorchid<a class="self-link" href="#valdef-color-mediumorchid"></a></dfn>
      <td>#ba55d3
      <td>186 85 211 
     <tr>
      <td style="background:mediumpurple">
      <td style="background:#9370db">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-mediumpurple">mediumpurple<a class="self-link" href="#valdef-color-mediumpurple"></a></dfn>
      <td>#9370db
      <td>147 112 219 
     <tr>
      <td style="background:mediumseagreen">
      <td style="background:#3cb371">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-mediumseagreen">mediumseagreen<a class="self-link" href="#valdef-color-mediumseagreen"></a></dfn>
      <td>#3cb371
      <td>60 179 113 
     <tr>
      <td style="background:mediumslateblue">
      <td style="background:#7b68ee">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-mediumslateblue">mediumslateblue<a class="self-link" href="#valdef-color-mediumslateblue"></a></dfn>
      <td>#7b68ee
      <td>123 104 238 
     <tr>
      <td style="background:mediumspringgreen">
      <td style="background:#00fa9a">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-mediumspringgreen">mediumspringgreen<a class="self-link" href="#valdef-color-mediumspringgreen"></a></dfn>
      <td>#00fa9a
      <td>0 250 154 
     <tr>
      <td style="background:mediumturquoise">
      <td style="background:#48d1cc">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-mediumturquoise">mediumturquoise<a class="self-link" href="#valdef-color-mediumturquoise"></a></dfn>
      <td>#48d1cc
      <td>72 209 204 
     <tr>
      <td style="background:mediumvioletred">
      <td style="background:#c71585">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-mediumvioletred">mediumvioletred<a class="self-link" href="#valdef-color-mediumvioletred"></a></dfn>
      <td>#c71585
      <td>199 21 133 
     <tr>
      <td style="background:midnightblue">
      <td style="background:#191970">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-midnightblue">midnightblue<a class="self-link" href="#valdef-color-midnightblue"></a></dfn>
      <td>#191970
      <td>25 25 112 
     <tr>
      <td style="background:mintcream">
      <td style="background:#f5fffa">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-mintcream">mintcream<a class="self-link" href="#valdef-color-mintcream"></a></dfn>
      <td>#f5fffa
      <td>245 255 250 
     <tr>
      <td style="background:mistyrose">
      <td style="background:#ffe4e1">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-mistyrose">mistyrose<a class="self-link" href="#valdef-color-mistyrose"></a></dfn>
      <td>#ffe4e1
      <td>255 228 225 
     <tr>
      <td style="background:moccasin">
      <td style="background:#ffe4b5">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-moccasin">moccasin<a class="self-link" href="#valdef-color-moccasin"></a></dfn>
      <td>#ffe4b5
      <td>255 228 181 
     <tr>
      <td style="background:navajowhite">
      <td style="background:#ffdead">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-navajowhite">navajowhite<a class="self-link" href="#valdef-color-navajowhite"></a></dfn>
      <td>#ffdead
      <td>255 222 173 
     <tr>
      <td style="background:navy">
      <td style="background:#000080">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-navy">navy<a class="self-link" href="#valdef-color-navy"></a></dfn>
      <td>#000080
      <td>0 0 128 
     <tr>
      <td style="background:oldlace">
      <td style="background:#fdf5e6">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-oldlace">oldlace<a class="self-link" href="#valdef-color-oldlace"></a></dfn>
      <td>#fdf5e6
      <td>253 245 230 
     <tr>
      <td style="background:olive">
      <td style="background:#808000">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-olive">olive<a class="self-link" href="#valdef-color-olive"></a></dfn>
      <td>#808000
      <td>128 128 0 
     <tr>
      <td style="background:olivedrab">
      <td style="background:#6b8e23">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-olivedrab">olivedrab<a class="self-link" href="#valdef-color-olivedrab"></a></dfn>
      <td>#6b8e23
      <td>107 142 35 
     <tr>
      <td style="background:orange">
      <td style="background:#ffa500">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-orange">orange<a class="self-link" href="#valdef-color-orange"></a></dfn>
      <td>#ffa500
      <td>255 165 0 
     <tr>
      <td style="background:orangered">
      <td style="background:#ff4500">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-orangered">orangered<a class="self-link" href="#valdef-color-orangered"></a></dfn>
      <td>#ff4500
      <td>255 69 0 
     <tr>
      <td style="background:orchid">
      <td style="background:#da70d6">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-orchid">orchid<a class="self-link" href="#valdef-color-orchid"></a></dfn>
      <td>#da70d6
      <td>218 112 214 
     <tr>
      <td style="background:palegoldenrod">
      <td style="background:#eee8aa">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-palegoldenrod">palegoldenrod<a class="self-link" href="#valdef-color-palegoldenrod"></a></dfn>
      <td>#eee8aa
      <td>238 232 170 
     <tr>
      <td style="background:palegreen">
      <td style="background:#98fb98">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-palegreen">palegreen<a class="self-link" href="#valdef-color-palegreen"></a></dfn>
      <td>#98fb98
      <td>152 251 152 
     <tr>
      <td style="background:paleturquoise">
      <td style="background:#afeeee">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-paleturquoise">paleturquoise<a class="self-link" href="#valdef-color-paleturquoise"></a></dfn>
      <td>#afeeee
      <td>175 238 238 
     <tr>
      <td style="background:palevioletred">
      <td style="background:#db7093">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-palevioletred">palevioletred<a class="self-link" href="#valdef-color-palevioletred"></a></dfn>
      <td>#db7093
      <td>219 112 147 
     <tr>
      <td style="background:papayawhip">
      <td style="background:#ffefd5">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-papayawhip">papayawhip<a class="self-link" href="#valdef-color-papayawhip"></a></dfn>
      <td>#ffefd5
      <td>255 239 213 
     <tr>
      <td style="background:peachpuff">
      <td style="background:#ffdab9">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-peachpuff">peachpuff<a class="self-link" href="#valdef-color-peachpuff"></a></dfn>
      <td>#ffdab9
      <td>255 218 185 
     <tr>
      <td style="background:peru">
      <td style="background:#cd853f">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-peru">peru<a class="self-link" href="#valdef-color-peru"></a></dfn>
      <td>#cd853f
      <td>205 133 63 
     <tr>
      <td style="background:pink">
      <td style="background:#ffc0cb">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-pink">pink<a class="self-link" href="#valdef-color-pink"></a></dfn>
      <td>#ffc0cb
      <td>255 192 203 
     <tr>
      <td style="background:plum">
      <td style="background:#dda0dd">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-plum">plum<a class="self-link" href="#valdef-color-plum"></a></dfn>
      <td>#dda0dd
      <td>221 160 221 
     <tr>
      <td style="background:powderblue">
      <td style="background:#b0e0e6">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-powderblue">powderblue<a class="self-link" href="#valdef-color-powderblue"></a></dfn>
      <td>#b0e0e6
      <td>176 224 230 
     <tr>
      <td style="background:purple">
      <td style="background:#800080">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-purple">purple<a class="self-link" href="#valdef-color-purple"></a></dfn>
      <td>#800080
      <td>128 0 128 
     <tr>
      <td style="background:rebeccapurple">
      <td style="background:#663399">
      <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-rebeccapurple">rebeccapurple</dfn>
      <td>#663399
      <td>102 51 153 
     <tr>
      <td style="background:red">
      <td style="background:#ff0000">
      <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-red">red</dfn>
      <td>#ff0000
      <td>255 0 0 
     <tr>
      <td style="background:rosybrown">
      <td style="background:#bc8f8f">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-rosybrown">rosybrown<a class="self-link" href="#valdef-color-rosybrown"></a></dfn>
      <td>#bc8f8f
      <td>188 143 143 
     <tr>
      <td style="background:royalblue">
      <td style="background:#4169e1">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-royalblue">royalblue<a class="self-link" href="#valdef-color-royalblue"></a></dfn>
      <td>#4169e1
      <td>65 105 225 
     <tr>
      <td style="background:saddlebrown">
      <td style="background:#8b4513">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-saddlebrown">saddlebrown<a class="self-link" href="#valdef-color-saddlebrown"></a></dfn>
      <td>#8b4513
      <td>139 69 19 
     <tr>
      <td style="background:salmon">
      <td style="background:#fa8072">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-salmon">salmon<a class="self-link" href="#valdef-color-salmon"></a></dfn>
      <td>#fa8072
      <td>250 128 114 
     <tr>
      <td style="background:sandybrown">
      <td style="background:#f4a460">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-sandybrown">sandybrown<a class="self-link" href="#valdef-color-sandybrown"></a></dfn>
      <td>#f4a460
      <td>244 164 96 
     <tr>
      <td style="background:seagreen">
      <td style="background:#2e8b57">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-seagreen">seagreen<a class="self-link" href="#valdef-color-seagreen"></a></dfn>
      <td>#2e8b57
      <td>46 139 87 
     <tr>
      <td style="background:seashell">
      <td style="background:#fff5ee">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-seashell">seashell<a class="self-link" href="#valdef-color-seashell"></a></dfn>
      <td>#fff5ee
      <td>255 245 238 
     <tr>
      <td style="background:sienna">
      <td style="background:#a0522d">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-sienna">sienna<a class="self-link" href="#valdef-color-sienna"></a></dfn>
      <td>#a0522d
      <td>160 82 45 
     <tr>
      <td style="background:silver">
      <td style="background:#c0c0c0">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-silver">silver<a class="self-link" href="#valdef-color-silver"></a></dfn>
      <td>#c0c0c0
      <td>192 192 192 
     <tr>
      <td style="background:skyblue">
      <td style="background:#87ceeb">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-skyblue">skyblue<a class="self-link" href="#valdef-color-skyblue"></a></dfn>
      <td>#87ceeb
      <td>135 206 235 
     <tr>
      <td style="background:slateblue">
      <td style="background:#6a5acd">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-slateblue">slateblue<a class="self-link" href="#valdef-color-slateblue"></a></dfn>
      <td>#6a5acd
      <td>106 90 205 
     <tr>
      <td style="background:slategray">
      <td style="background:#708090">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-slategray">slategray<a class="self-link" href="#valdef-color-slategray"></a></dfn>
      <td>#708090
      <td>112 128 144 
     <tr>
      <td style="background:slategrey">
      <td style="background:#708090">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-slategrey">slategrey<a class="self-link" href="#valdef-color-slategrey"></a></dfn>
      <td>#708090
      <td>112 128 144 
     <tr>
      <td style="background:snow">
      <td style="background:#fffafa">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-snow">snow<a class="self-link" href="#valdef-color-snow"></a></dfn>
      <td>#fffafa
      <td>255 250 250 
     <tr>
      <td style="background:springgreen">
      <td style="background:#00ff7f">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-springgreen">springgreen<a class="self-link" href="#valdef-color-springgreen"></a></dfn>
      <td>#00ff7f
      <td>0 255 127 
     <tr>
      <td style="background:steelblue">
      <td style="background:#4682b4">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-steelblue">steelblue<a class="self-link" href="#valdef-color-steelblue"></a></dfn>
      <td>#4682b4
      <td>70 130 180 
     <tr>
      <td style="background:tan">
      <td style="background:#d2b48c">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-tan">tan<a class="self-link" href="#valdef-color-tan"></a></dfn>
      <td>#d2b48c
      <td>210 180 140 
     <tr>
      <td style="background:teal">
      <td style="background:#008080">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-teal">teal<a class="self-link" href="#valdef-color-teal"></a></dfn>
      <td>#008080
      <td>0 128 128 
     <tr>
      <td style="background:thistle">
      <td style="background:#d8bfd8">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-thistle">thistle<a class="self-link" href="#valdef-color-thistle"></a></dfn>
      <td>#d8bfd8
      <td>216 191 216 
     <tr>
      <td style="background:tomato">
      <td style="background:#ff6347">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-tomato">tomato<a class="self-link" href="#valdef-color-tomato"></a></dfn>
      <td>#ff6347
      <td>255 99 71 
     <tr>
      <td style="background:turquoise">
      <td style="background:#40e0d0">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-turquoise">turquoise<a class="self-link" href="#valdef-color-turquoise"></a></dfn>
      <td>#40e0d0
      <td>64 224 208 
     <tr>
      <td style="background:violet">
      <td style="background:#ee82ee">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-violet">violet<a class="self-link" href="#valdef-color-violet"></a></dfn>
      <td>#ee82ee
      <td>238 130 238 
     <tr>
      <td style="background:wheat">
      <td style="background:#f5deb3">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-wheat">wheat<a class="self-link" href="#valdef-color-wheat"></a></dfn>
      <td>#f5deb3
      <td>245 222 179 
     <tr>
      <td style="background:white">
      <td style="background:#ffffff">
      <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-white">white</dfn>
      <td>#ffffff
      <td>255 255 255 
     <tr>
      <td style="background:whitesmoke">
      <td style="background:#f5f5f5">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-whitesmoke">whitesmoke<a class="self-link" href="#valdef-color-whitesmoke"></a></dfn>
      <td>#f5f5f5
      <td>245 245 245 
     <tr>
      <td style="background:yellow">
      <td style="background:#ffff00">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-yellow">yellow<a class="self-link" href="#valdef-color-yellow"></a></dfn>
      <td>#ffff00
      <td>255 255 0 
     <tr>
      <td style="background:yellowgreen">
      <td style="background:#9acd32">
      <th scope="row"><dfn class="css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-yellowgreen">yellowgreen<a class="self-link" href="#valdef-color-yellowgreen"></a></dfn>
      <td>#9acd32
      <td>154 205 50 
   </table>
   <p class="note" role="note"><span>Note:</span> this list of colors and their definitions is a superset of the list of <a href="https://www.w3.org/TR/SVG11/types.html#ColorKeywords">named colors defined by SVG 1.1</a>.</p>
    For historical reasons, this is also referred to as the X11 color set. 
   <p class="note" role="note"><span>Note:</span> The history of the X11 color system is interesting,
	and was excellently summarized by <a href="https://www.youtube.com/watch?v=HmStJQzclHc">Alex Sexton in his talk “Peachpuffs and Lemonchiffons”</a>.</p>
   <h3 class="heading settled dfn-paneled" data-dfn-type="dfn" data-level="6.2" data-lt="system colors" data-noexport id="css-system-colors"><span class="secno">6.2. </span><span class="content"> System Colors</span></h3>
   <p>In <a data-link-type="dfn" href="https://drafts.csswg.org/css-color-adjust-1/#forced-colors-mode" id="ref-for-forced-colors-mode">forced colors mode</a>,
	most colors on the page are forced into a restricted, user-chosen palette.
	The <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-system-color">&lt;system-color></dfn> keywords
	expose these user-chosen colors
	so that the rest of the page can integrate with this restricted palette.</p>
   <p>When the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/mediaqueries-5/#descdef-media-forced-colors" id="ref-for-descdef-media-forced-colors">forced-colors</a> <a data-link-type="dfn" href="https://drafts.csswg.org/mediaqueries-4/#media-feature" id="ref-for-media-feature">media feature</a> is <span class="css">active</span>,
	authors <em>should</em> use the <a class="production css" data-link-type="type" href="#typedef-system-color" id="ref-for-typedef-system-color②" title="Expands to: visitedtext | activetext | canvas | canvastext | graytext | buttontext | buttonface | fieldtext | field | linktext | highlighttext | highlight">&lt;system-color></a> keywords as color values
	in properties other than those listed in <a href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">CSS Color Adjust §3.1 Properties Affected by Forced Colors Mode</a>,
	to ensure legibility and consistency across the page
	and avoid an uncoordinated mishmash of user-forced and page-chosen colors.</p>
   <p>Authors <em>may</em> also use these keywords at any time,
	but <em>should</em> be careful to use the colors
	in <a href="#system-color-pairs">matching background-foreground pairs</a> to ensure appropriate contrast,
	as any particular contrast relationship across non-matching pairs
	(e.g. <a class="css" data-link-type="maybe" href="#valdef-system-color-canvas" id="ref-for-valdef-system-color-canvas">Canvas</a> and <a class="css" data-link-type="maybe" href="#valdef-system-color-buttontext" id="ref-for-valdef-system-color-buttontext">ButtonText</a>)
	is not guaranteed.</p>
   <p>The <a class="production css" data-link-type="type" href="#typedef-system-color" id="ref-for-typedef-system-color③" title="Expands to: visitedtext | activetext | canvas | canvastext | graytext | buttontext | buttonface | fieldtext | field | linktext | highlighttext | highlight">&lt;system-color></a> keywords are defined as follows:</p>
   <dl id="system-color-values">
    <dt><dfn class="dfn-paneled css" data-dfn-for="<system-color>" data-dfn-type="value" data-export id="valdef-system-color-canvas">Canvas</dfn> 
    <dd>Background of application content or documents. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="<system-color>" data-dfn-type="value" data-export id="valdef-system-color-canvastext">CanvasText</dfn> 
    <dd>Text in application content or documents. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="<system-color>" data-dfn-type="value" data-export id="valdef-system-color-linktext">LinkText</dfn> 
    <dd>Text in non-active, non-visited links. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="<system-color>" data-dfn-type="value" data-export id="valdef-system-color-visitedtext">VisitedText</dfn> 
    <dd>Text in visited links. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="<system-color>" data-dfn-type="value" data-export id="valdef-system-color-activetext">ActiveText</dfn> 
    <dd>Text in active links. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="<system-color>" data-dfn-type="value" data-export id="valdef-system-color-buttonface">ButtonFace</dfn> 
    <dd>The face background color for push buttons. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="<system-color>" data-dfn-type="value" data-export id="valdef-system-color-buttontext">ButtonText</dfn> 
    <dd>Text on push buttons. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="<system-color>" data-dfn-type="value" data-export id="valdef-system-color-field">Field</dfn> 
    <dd>Background of input fields. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="<system-color>" data-dfn-type="value" data-export id="valdef-system-color-fieldtext">FieldText</dfn> 
    <dd>Text in input fields. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="<system-color>" data-dfn-type="value" data-export id="valdef-system-color-highlight">Highlight</dfn> 
    <dd>Background of item(s) selected in a control. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="<system-color>" data-dfn-type="value" data-export id="valdef-system-color-highlighttext">HighlightText</dfn> 
    <dd>Text of item(s) selected in a control. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="<system-color>" data-dfn-type="value" data-export id="valdef-system-color-graytext">GrayText</dfn> 
    <dd>Disabled text.
			(Often, but not necessarily, gray.) 
   </dl>
   <p class="note" role="note"><span>Note:</span> As with all other <a data-link-type="dfn">keywords</a>,
	these names are case-insensitive.
	They are shown here with mixed capitalization for legibility.</p>
   <p>For systems that do not have a particular system UI concept,
	the specified value should be mapped to
	the most closely related system color value that exists.
	The following pairings are expected to form legible background-foreground colors:</p>
   <ul id="system-color-pairs">
    <li data-md>
     <p><a class="css" data-link-type="maybe" href="#valdef-system-color-canvas" id="ref-for-valdef-system-color-canvas①">Canvas</a> background with <a class="css" data-link-type="maybe" href="#valdef-system-color-canvastext" id="ref-for-valdef-system-color-canvastext">CanvasText</a>, <a class="css" data-link-type="maybe" href="#valdef-system-color-linktext" id="ref-for-valdef-system-color-linktext">LinkText</a>, <a class="css" data-link-type="maybe" href="#valdef-system-color-visitedtext" id="ref-for-valdef-system-color-visitedtext">VisitedText</a>, <a class="css" data-link-type="maybe" href="#valdef-system-color-activetext" id="ref-for-valdef-system-color-activetext">ActiveText</a> foreground.</p>
    <li data-md>
     <p><a class="css" data-link-type="maybe" href="#valdef-system-color-buttonface" id="ref-for-valdef-system-color-buttonface">ButtonFace</a> background with <a class="css" data-link-type="maybe" href="#valdef-system-color-buttontext" id="ref-for-valdef-system-color-buttontext①">ButtonText</a> foreground.</p>
    <li data-md>
     <p><a class="css" data-link-type="maybe" href="#valdef-system-color-field" id="ref-for-valdef-system-color-field">Field</a> background with <a class="css" data-link-type="maybe" href="#valdef-system-color-fieldtext" id="ref-for-valdef-system-color-fieldtext">FieldText</a> foreground.</p>
    <li data-md>
     <p><a class="css" data-link-type="maybe" href="#valdef-system-color-highlight" id="ref-for-valdef-system-color-highlight">Highlight</a> background with <a class="css" data-link-type="maybe" href="#valdef-system-color-highlighttext" id="ref-for-valdef-system-color-highlighttext">HighlightText</a> foreground.</p>
   </ul>
   <p>Additionally, <a class="css" data-link-type="maybe" href="#valdef-system-color-graytext" id="ref-for-valdef-system-color-graytext">GrayText</a> is expected to be readable,
	though possibly at a lower contrast rating,
	over any of the backgrounds.</p>
   <p>Earlier versions of CSS defined additional <a class="production css" data-link-type="type" href="#typedef-system-color" id="ref-for-typedef-system-color④" title="Expands to: visitedtext | activetext | canvas | canvastext | graytext | buttontext | buttonface | fieldtext | field | linktext | highlighttext | highlight">&lt;system-color></a>s,
	which have since been deprecated.
	These are documented in <a href="#deprecated-system-colors">Appendix A: Deprecated CSS System Colors</a>.</p>
   <p class="note" role="note"><span>Note:</span> The <a class="production css" data-link-type="type" href="#typedef-system-color" id="ref-for-typedef-system-color⑤" title="Expands to: visitedtext | activetext | canvas | canvastext | graytext | buttontext | buttonface | fieldtext | field | linktext | highlighttext | highlight">&lt;system-color></a>s incur some privacy and security risk, as detailed in <a href="#priv-sec">§ 16 Security and Privacy Considerations</a>.</p>
   <h3 class="heading settled" data-level="6.3" id="transparent-color"><span class="secno">6.3. </span><span class="content"> The <a class="css" data-link-type="maybe" href="#valdef-color-transparent" id="ref-for-valdef-color-transparent③">transparent</a> keyword</span><a class="self-link" href="#transparent-color"></a></h3>
   <p>The keyword <dfn class="dfn-paneled css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-transparent">transparent</dfn> specifies a <a data-link-type="dfn" href="#transparent-black" id="ref-for-transparent-black①">transparent black</a>.
	It is a type of <a class="production css" data-link-type="type" href="#typedef-named-color" id="ref-for-typedef-named-color①">&lt;named-color></a>.</p>
   <h3 class="heading settled" data-level="6.4" id="currentcolor-color"><span class="secno">6.4. </span><span class="content"> The <a class="css" data-link-type="maybe" href="#valdef-color-currentcolor" id="ref-for-valdef-color-currentcolor⑥">currentcolor</a> keyword</span><a class="self-link" href="#currentcolor-color"></a></h3>
   <p>The keyword <dfn class="dfn-paneled css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-currentcolor">currentcolor</dfn> represents value of the <a class="property" data-link-type="propdesc" href="#propdef-color" id="ref-for-propdef-color⑤">color</a> property on the same element.
	Its <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#used-value" id="ref-for-used-value②">used values</a> is determined by <a data-link-type="dfn" href="https://drafts.csswg.org/css-color-4/#resolve-color-values" id="ref-for-resolve-color-values①">resolving color values</a>.</p>
   <div class="example" id="example-1eec77a7">
    <a class="self-link" href="#example-1eec77a7"></a> Here’s a simple example showing how to use the <a class="css" data-link-type="maybe" href="#valdef-color-currentcolor" id="ref-for-valdef-color-currentcolor⑦">currentcolor</a> keyword: 
<pre class="lang-css highlight"><c- f>.foo </c-><c- p>{</c->
  <c- k>color</c-><c- p>:</c-> red<c- p>;</c->
  <c- k>background-color</c-><c- p>:</c-> currentcolor<c- p>;</c->
<c- p>}</c->
</pre>
    <p>This is equivalent to writing:</p>
<pre class="lang-css highlight"><c- f>.foo </c-><c- p>{</c->
  <c- k>color</c-><c- p>:</c-> red<c- p>;</c->
  <c- k>background-color</c-><c- p>:</c-> red<c- p>;</c->
<c- p>}</c->
</pre>
   </div>
   <div class="example" id="example-e05f9f1e">
    <a class="self-link" href="#example-e05f9f1e"></a> For example, the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-text-decor-3/#propdef-text-emphasis-color" id="ref-for-propdef-text-emphasis-color">text-emphasis-color</a> property <a data-link-type="biblio" href="#biblio-css3-text-decor">[CSS3-TEXT-DECOR]</a>,
		whose initial value is <a class="css" data-link-type="maybe" href="#valdef-color-currentcolor" id="ref-for-valdef-color-currentcolor⑧">currentcolor</a>,
		by default matches the text color
		even as the <a class="property" data-link-type="propdesc" href="#propdef-color" id="ref-for-propdef-color⑥">color</a> property changes across elements. 
<pre class="language-markup highlight"><c- p>&lt;</c-><c- f>p</c-><c- p>>&lt;</c-><c- f>em</c-><c- p>></c->Some <c- p>&lt;</c-><c- f>strong</c-><c- p>></c->really<c- p>&lt;/</c-><c- f>strong</c-><c- p>></c-> emphasized text.<c- p>&lt;/</c-><c- f>em</c-><c- p>></c->
<c- p>&lt;</c-><c- f>style</c-><c- p>></c->
<c- f>p</c-> <c- p>{</c-> <c- k>color</c-><c- p>:</c-> <c- kc>black</c-><c- p>;</c-> <c- p>}</c->
<c- f>em</c-> <c- p>{</c-> <c- k>text-emphasis</c-><c- p>:</c-> <c- kc>dot</c-><c- p>;</c-> <c- p>}</c->
<c- f>strong</c-> <c- p>{</c-> <c- k>color</c-><c- p>:</c-> <c- kc>red</c-><c- p>;</c-> <c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>></c->
</pre>
    <p>In the above example, the emphasis marks would be black over the text "Some" and "emphasized text",
		but red over the text "really".</p>
   </div>
   <p class="note" role="note"><span>Note:</span> Multi-word keywords in CSS usually separate their component words with hyphens. <a class="css" data-link-type="maybe" href="#valdef-color-currentcolor" id="ref-for-valdef-color-currentcolor⑨">currentcolor</a> doesn’t, because it was originally introduced in SVG
	as a special attribute value spelled "currentColor",
	rather than a CSS value.
	Only later did CSS pick it up,
	at which point the capitalization stopped mattering,
	as CSS keywords are case-insensitive.</p>
   <h2 class="heading settled" data-level="7" id="the-hsl-notation"><span class="secno">7. </span><span class="content"> HSL Colors: <a class="css" data-link-type="maybe" href="#funcdef-hsl" id="ref-for-funcdef-hsl④">hsl()</a> and <a class="css" data-link-type="maybe" href="#funcdef-hsla" id="ref-for-funcdef-hsla③">hsla()</a> functions</span><a class="self-link" href="#the-hsl-notation"></a></h2>
   <p>The RGB system for specifying colors,
	while convenient for machines and graphic libraries,
	is often regarded as very difficult for humans to gain an intuitive grasp on.
	It’s not easy to tell, for example,
	how to alter an RGB color to produce a lighter variant of the same hue.</p>
   <p>There are several other color schemes possible.
	One such is the HSL color scheme,
	which is much more intuitive to use,
	but still maps easily back to RGB colors.</p>
   <p>HSL colors are specified as a triplet of hue, saturation, and lightness.
	The syntax of the <a class="css" data-link-type="maybe" href="#funcdef-hsl" id="ref-for-funcdef-hsl⑤">hsl()</a> function is:</p>
<pre class="prod"><dfn class="dfn-paneled" data-dfn-type="function" data-export id="funcdef-hsl">hsl()</dfn> = hsl( <a class="production" data-link-type="type" href="#typedef-hue" id="ref-for-typedef-hue">&lt;hue></a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value⑤">&lt;percentage></a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value⑥">&lt;percentage></a> [ / <a class="production" data-link-type="type" href="#typedef-alpha-value" id="ref-for-typedef-alpha-value⑤">&lt;alpha-value></a> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt④">?</a> )
<dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-hue">&lt;hue></dfn> = <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value⑤">&lt;number></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⑤">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#angle-value" id="ref-for-angle-value" title="Expands to: turn | rad | grad | deg">&lt;angle></a>
</pre>
   <p>The first argument specifies the hue.
	Hue is represented as an angle of the color circle
	(the rainbow, twisted around into a circle).
	The angle <span class="css">0deg</span> represents red
	(as does <span class="css">360deg</span>, <span class="css">720deg</span>, etc.),
	and the rest of the hues are spread around the circle,
	so <span class="css">120deg</span> represents green, <span class="css">240deg</span> represents blue, etc.
	Because this value is so often given in degrees,
	the argument can also be given as a number,
	which is interpreted as a number of degrees.</p>
   <p>The next two arguments are the saturation and lightness, respectively.
	For saturation, <span class="css">100%</span> is a fully-saturated, bright color,
	and <span class="css">0%</span> is a fully-unsaturated gray.
	For lightness, <span class="css">50%</span> represents the "normal" color,
	while <span class="css">100%</span> is white and <span class="css">0%</span> is black.
	If the saturation or lightness are less than <span class="css">0%</span> or greater than <span class="css">100%</span>,
	they are clamped to those values before being converted to an RGB color.</p>
   <p>The final argument specifies the alpha channel of the color.
	It’s interpreted identically to the fourth argument of the <a class="css" data-link-type="maybe" href="#funcdef-rgb" id="ref-for-funcdef-rgb⑨">rgb()</a> function.
	If omitted, it defaults to <span class="css">100%</span>.</p>
   <div class="example" id="example-6ff3cb93"><a class="self-link" href="#example-6ff3cb93"></a> For example, an ordinary red,
		the same color you would see from the keyword <a class="css" data-link-type="maybe" href="#valdef-color-red" id="ref-for-valdef-color-red">red</a> or the hex notation <span class="css">#f00</span>,
		is represented in HSL as <span class="css">hsl(0deg 100% 50%)</span>. </div>
   <p>The advantage of HSL over RGB is that it is far more intuitive:
	one can guess at the colors they want,
	and then tweak.
	It is also easier to create sets of matching colors
	(by keeping the hue the same and varying the saturation and lightness).</p>
   <p>HSL colors resolve to sRGB.</p>
   <div class="example" id="example-2c95fe25">
    <a class="self-link" href="#example-2c95fe25"></a> For example, the following colors can all be generated off of the basic "green" hue,
		just by varying the other two arguments: 
<pre>hsl(120deg 100% 50%) <span style="color:black; background:hsl(120,100%,50%);">lime green</span>
hsl(120deg 100% 25%) <span style="color:white; background:hsl(120,100%,25%);">dark green</span>
hsl(120deg 100% 75%) <span style="color:black; background:hsl(120,100%,75%);">light green</span>
hsl(120deg 75% 85%)  <span style="color:black; background:hsl(120,75%,85%);">pastel green</span>
</pre>
   </div>
   <p>For legacy reasons, <a class="css" data-link-type="maybe" href="#funcdef-hsl" id="ref-for-funcdef-hsl⑥">hsl()</a> also supports an alternate syntax
	that separates all of its arguments with commas:</p>
<pre class="prod">hsl() = hsl( <a class="production" data-link-type="type" href="#typedef-hue" id="ref-for-typedef-hue①">&lt;hue></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-comma" id="ref-for-comb-comma②">,</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value⑦">&lt;percentage></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-comma" id="ref-for-comb-comma③">,</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value⑧">&lt;percentage></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-comma" id="ref-for-comb-comma④">,</a> <a class="production" data-link-type="type" href="#typedef-alpha-value" id="ref-for-typedef-alpha-value⑥">&lt;alpha-value></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt⑤">?</a> )
</pre>
   <p>Also for legacy reasons,
	an <dfn class="dfn-paneled css" data-dfn-type="function" data-export id="funcdef-hsla">hsla()</dfn> function also exists,
	with an identical grammar and behavior to <a class="css" data-link-type="maybe" href="#funcdef-hsl" id="ref-for-funcdef-hsl⑦">hsl()</a>.</p>
   <h3 class="heading settled" data-level="7.1" id="hsl-to-rgb"><span class="secno">7.1. </span><span class="content"> Converting HSL colors to sRGB colors</span><a class="self-link" href="#hsl-to-rgb"></a></h3>
   <p>Converting an HSL color to sRGB is straightforward mathematically.
	Here’s a simple implementation of the conversion algorithm in JavaScript.
	For simplicity, this algorithm assumes that the hue has been normalized to
	a number in the half-open range [0, 6),
	and the saturation and lightness have been normalized to the range [0, 1].
	It returns an array of three numbers
	representing the red, green, and blue channels of the colors,
	normalized to the range [0, 1].</p>
<pre class="lang-javascript highlight"><c- a>function</c-> hslToRgb<c- p>(</c->hue<c- p>,</c-> sat<c- p>,</c-> light<c- p>)</c-> <c- p>{</c->
  <c- k>if</c-><c- p>(</c-> light <c- o>&lt;=</c-> <c- mf>.5</c-> <c- p>)</c-> <c- p>{</c->
    <c- a>var</c-> t2 <c- o>=</c-> light <c- o>*</c-> <c- p>(</c->sat <c- o>+</c-> <c- mi>1</c-><c- p>);</c->
  <c- p>}</c-> <c- k>else</c-> <c- p>{</c->
    <c- a>var</c-> t2 <c- o>=</c-> light <c- o>+</c-> sat <c- o>-</c-> <c- p>(</c->light <c- o>*</c-> sat<c- p>);</c->
  <c- p>}</c->
  <c- a>var</c-> t1 <c- o>=</c-> light <c- o>*</c-> <c- mi>2</c-> <c- o>-</c-> t2<c- p>;</c->
  <c- a>var</c-> r <c- o>=</c-> hueToRgb<c- p>(</c->t1<c- p>,</c-> t2<c- p>,</c-> hue <c- o>+</c-> <c- mi>2</c-><c- p>);</c->
  <c- a>var</c-> g <c- o>=</c-> hueToRgb<c- p>(</c->t1<c- p>,</c-> t2<c- p>,</c-> hue<c- p>);</c->
  <c- a>var</c-> b <c- o>=</c-> hueToRgb<c- p>(</c->t1<c- p>,</c-> t2<c- p>,</c-> hue <c- o>-</c-> <c- mi>2</c-><c- p>);</c->
  <c- k>return</c-> <c- p>[</c->r<c- p>,</c->g<c- p>,</c->b<c- p>];</c->
<c- p>}</c->

<c- a>function</c-> hueToRgb<c- p>(</c->t1<c- p>,</c-> t2<c- p>,</c-> hue<c- p>)</c-> <c- p>{</c->
  <c- k>if</c-><c- p>(</c->hue <c- o>&lt;</c-> <c- mi>0</c-><c- p>)</c-> hue <c- o>+=</c-> <c- mi>6</c-><c- p>;</c->
  <c- k>if</c-><c- p>(</c->hue <c- o>>=</c-> <c- mi>6</c-><c- p>)</c-> hue <c- o>-=</c-> <c- mi>6</c-><c- p>;</c->

  <c- k>if</c-><c- p>(</c->hue <c- o>&lt;</c-> <c- mi>1</c-><c- p>)</c-> <c- k>return</c-> <c- p>(</c->t2 <c- o>-</c-> t1<c- p>)</c-> <c- o>*</c-> hue <c- o>+</c-> t1<c- p>;</c->
  <c- k>else</c-> <c- k>if</c-><c- p>(</c->hue <c- o>&lt;</c-> <c- mi>3</c-><c- p>)</c-> <c- k>return</c-> t2<c- p>;</c->
  <c- k>else</c-> <c- k>if</c-><c- p>(</c->hue <c- o>&lt;</c-> <c- mi>4</c-><c- p>)</c-> <c- k>return</c-> <c- p>(</c->t2 <c- o>-</c-> t1<c- p>)</c-> <c- o>*</c-> <c- p>(</c-><c- mi>4</c-> <c- o>-</c-> hue<c- p>)</c-> <c- o>+</c-> t1<c- p>;</c->
  <c- k>else</c-> <c- k>return</c-> t1<c- p>;</c->
<c- p>}</c->
</pre>
   <h3 class="heading settled" data-level="7.2" id="hsl-examples"><span class="secno">7.2. </span><span class="content"> Examples of HSL colors</span><a class="self-link" href="#hsl-examples"></a></h3>
   <p>The tables below illustrate a wide range of possible HSL colors.
	Each table represents one hue,
	selected at 30° intervals,
	to illustrate the common "core" hues:
	red,
	yellow,
	green,
	cyan,
	blue,
	magenta,
	and the six intermediary colors between these.</p>
   <p>In each table, the X axis represents the saturation
	while the Y axis represents the lightness.</p>
   <p class="issue" id="issue-d41d8cd9"><a class="self-link" href="#issue-d41d8cd9"></a> <a href="https://github.com/w3c/csswg-drafts/issues/3088">&lt;https://github.com/w3c/csswg-drafts/issues/3088></a></p>
   <div class="note" role="note">The conversions in the table below are known to contain errors. They are copied from CSS Color 3, which also had the same errors. Those colors were supposedly computed by a program in ABC. A future spec will correctly compute those colors. Meanwhile, please note that these conversions are non-normative examples.</div>
   <div class="color-table" style="overflow: hidden;">
    <table>
     <tbody>
      <tr>
       <th>
       <th colspan="5">0° Reds 
      <tr>
       <th>
       <th colspan="5">Saturation 
      <tr>
       <th>
       <th>100%
       <th>75%
       <th>50%
       <th>25%
       <th>0% 
      <tr>
       <th>100% 
       <td style="color:#FFFFFF">
       <td style="color:#FFFFFF">
       <td style="color:#FFFFFF">
       <td style="color:#FFFFFF">
       <td style="color:#FFFFFF">
      <tr>
       <th>88% 
       <td style="color:#FFBFBF">
       <td style="color:#F7C7C7">
       <td style="color:#EFCFCF">
       <td style="color:#E7D7D7">
       <td style="color:#DFDFDF">
      <tr>
       <th>75% 
       <td style="color:#FF8080">
       <td style="color:#EF8F8F">
       <td style="color:#DF9F9F">
       <td style="color:#CFAFAF">
       <td style="color:#BFBFBF">
      <tr>
       <th>63% 
       <td style="color:#FF4040">
       <td style="color:#E75858">
       <td style="color:#CF7070">
       <td style="color:#B78787">
       <td style="color:#9F9F9F">
      <tr>
       <th>50% 
       <td style="color:#FF0000">
       <td style="color:#DF2020">
       <td style="color:#BF4040">
       <td style="color:#9F6060">
       <td style="color:#808080">
      <tr>
       <th>38% 
       <td style="color:#BF0000">
       <td style="color:#A71818">
       <td style="color:#8F3030">
       <td style="color:#784848">
       <td style="color:#606060">
      <tr>
       <th>25% 
       <td style="color:#800000">
       <td style="color:#701010">
       <td style="color:#602020">
       <td style="color:#503030">
       <td style="color:#404040">
      <tr>
       <th>13% 
       <td style="color:#400000">
       <td style="color:#380808">
       <td style="color:#301010">
       <td style="color:#281818">
       <td style="color:#202020">
      <tr>
       <th>0% 
       <td style="color:#000000">
       <td style="color:#000000">
       <td style="color:#000000">
       <td style="color:#000000">
       <td style="color:#000000">
    </table>
    <table>
     <tbody>
      <tr>
       <th>
       <th colspan="5">30° Red-Yellows (=Oranges) 
      <tr>
       <th>
       <th colspan="5">Saturation 
      <tr>
       <th>
       <th>100%
       <th>75%
       <th>50%
       <th>25%
       <th>0% 
      <tr>
       <th>100% 
       <td style="color:#FFFFFF">
       <td style="color:#FFFFFF">
       <td style="color:#FFFFFF">
       <td style="color:#FFFFFF">
       <td style="color:#FFFFFF">
      <tr>
       <th>88% 
       <td style="color:#FFDFBF">
       <td style="color:#F7DFC7">
       <td style="color:#EFDFCF">
       <td style="color:#E7DFD7">
       <td style="color:#DFDFDF">
      <tr>
       <th>75% 
       <td style="color:#FFBF80">
       <td style="color:#EFBF8F">
       <td style="color:#DFBF9F">
       <td style="color:#CFBFAF">
       <td style="color:#BFBFBF">
      <tr>
       <th>63% 
       <td style="color:#FF9F40">
       <td style="color:#E79F58">
       <td style="color:#CF9F70">
       <td style="color:#B79F87">
       <td style="color:#9F9F9F">
      <tr>
       <th>50% 
       <td style="color:#FF8000">
       <td style="color:#DF8020">
       <td style="color:#BF8040">
       <td style="color:#9F8060">
       <td style="color:#808080">
      <tr>
       <th>38% 
       <td style="color:#BF6000">
       <td style="color:#A76018">
       <td style="color:#8F6030">
       <td style="color:#786048">
       <td style="color:#606060">
      <tr>
       <th>25% 
       <td style="color:#804000">
       <td style="color:#704010">
       <td style="color:#604020">
       <td style="color:#504030">
       <td style="color:#404040">
      <tr>
       <th>13% 
       <td style="color:#402000">
       <td style="color:#382008">
       <td style="color:#302010">
       <td style="color:#282018">
       <td style="color:#202020">
      <tr>
       <th>0% 
       <td style="color:#000000">
       <td style="color:#000000">
       <td style="color:#000000">
       <td style="color:#000000">
       <td style="color:#000000">
    </table>
    <table>
     <tbody>
      <tr>
       <th>
       <th colspan="5">60° Yellows 
      <tr>
       <th>
       <th colspan="5">Saturation 
      <tr>
       <th>
       <th>100%
       <th>75%
       <th>50%
       <th>25%
       <th>0% 
      <tr>
       <th>100% 
       <td style="color:#FFFFFF">
       <td style="color:#FFFFFF">
       <td style="color:#FFFFFF">
       <td style="color:#FFFFFF">
       <td style="color:#FFFFFF">
      <tr>
       <th>88% 
       <td style="color:#FFFFBF">
       <td style="color:#F7F7C7">
       <td style="color:#EFEFCF">
       <td style="color:#E7E7D7">
       <td style="color:#DFDFDF">
      <tr>
       <th>75% 
       <td style="color:#FFFF80">
       <td style="color:#EFEF8F">
       <td style="color:#DFDF9F">
       <td style="color:#CFCFAF">
       <td style="color:#BFBFBF">
      <tr>
       <th>63% 
       <td style="color:#FFFF40">
       <td style="color:#E7E758">
       <td style="color:#CFCF70">
       <td style="color:#B7B787">
       <td style="color:#9F9F9F">
      <tr>
       <th>50% 
       <td style="color:#FFFF00">
       <td style="color:#DFDF20">
       <td style="color:#BFBF40">
       <td style="color:#9F9F60">
       <td style="color:#808080">
      <tr>
       <th>38% 
       <td style="color:#BFBF00">
       <td style="color:#A7A718">
       <td style="color:#8F8F30">
       <td style="color:#787848">
       <td style="color:#606060">
      <tr>
       <th>25% 
       <td style="color:#808000">
       <td style="color:#707010">
       <td style="color:#606020">
       <td style="color:#505030">
       <td style="color:#404040">
      <tr>
       <th>13% 
       <td style="color:#404000">
       <td style="color:#383808">
       <td style="color:#303010">
       <td style="color:#282818">
       <td style="color:#202020">
      <tr>
       <th>0% 
       <td style="color:#000000">
       <td style="color:#000000">
       <td style="color:#000000">
       <td style="color:#000000">
       <td style="color:#000000">
    </table>
    <table>
     <tbody>
      <tr>
       <th>
       <th colspan="5">90° Yellow-Greens 
      <tr>
       <th>
       <th colspan="5">Saturation 
      <tr>
       <th>
       <th>100%
       <th>75%
       <th>50%
       <th>25%
       <th>0% 
      <tr>
       <th>100% 
       <td style="color:#FFFFFF">
       <td style="color:#FFFFFF">
       <td style="color:#FFFFFF">
       <td style="color:#FFFFFF">
       <td style="color:#FFFFFF">
      <tr>
       <th>88% 
       <td style="color:#DFFFBF">
       <td style="color:#DFF7C7">
       <td style="color:#DFEFCF">
       <td style="color:#DFE7D7">
       <td style="color:#DFDFDF">
      <tr>
       <th>75% 
       <td style="color:#BFFF80">
       <td style="color:#BFEF8F">
       <td style="color:#BFDF9F">
       <td style="color:#BFCFAF">
       <td style="color:#BFBFBF">
      <tr>
       <th>63% 
       <td style="color:#9FFF40">
       <td style="color:#9FE758">
       <td style="color:#9FCF70">
       <td style="color:#9FB787">
       <td style="color:#9F9F9F">
      <tr>
       <th>50% 
       <td style="color:#80FF00">
       <td style="color:#80DF20">
       <td style="color:#80BF40">
       <td style="color:#809F60">
       <td style="color:#808080">
      <tr>
       <th>38% 
       <td style="color:#60BF00">
       <td style="color:#60A718">
       <td style="color:#608F30">
       <td style="color:#607848">
       <td style="color:#606060">
      <tr>
       <th>25% 
       <td style="color:#408000">
       <td style="color:#407010">
       <td style="color:#406020">
       <td style="color:#405030">
       <td style="color:#404040">
      <tr>
       <th>13% 
       <td style="color:#204000">
       <td style="color:#203808">
       <td style="color:#203010">
       <td style="color:#202818">
       <td style="color:#202020">
      <tr>
       <th>0% 
       <td style="color:#000000">
       <td style="color:#000000">
       <td style="color:#000000">
       <td style="color:#000000">
       <td style="color:#000000">
    </table>
    <table>
     <tbody>
      <tr>
       <th>
       <th colspan="5">120° Greens 
      <tr>
       <th>
       <th colspan="5">Saturation 
      <tr>
       <th>
       <th>100%
       <th>75%
       <th>50%
       <th>25%
       <th>0% 
      <tr>
       <th>100% 
       <td style="color:#FFFFFF">
       <td style="color:#FFFFFF">
       <td style="color:#FFFFFF">
       <td style="color:#FFFFFF">
       <td style="color:#FFFFFF">
      <tr>
       <th>88% 
       <td style="color:#BFFFBF">
       <td style="color:#C7F7C7">
       <td style="color:#CFEFCF">
       <td style="color:#D7E7D7">
       <td style="color:#DFDFDF">
      <tr>
       <th>75% 
       <td style="color:#80FF80">
       <td style="color:#8FEF8F">
       <td style="color:#9FDF9F">
       <td style="color:#AFCFAF">
       <td style="color:#BFBFBF">
      <tr>
       <th>63% 
       <td style="color:#40FF40">
       <td style="color:#58E758">
       <td style="color:#70CF70">
       <td style="color:#87B787">
       <td style="color:#9F9F9F">
      <tr>
       <th>50% 
       <td style="color:#00FF00">
       <td style="color:#20DF20">
       <td style="color:#40BF40">
       <td style="color:#609F60">
       <td style="color:#808080">
      <tr>
       <th>38% 
       <td style="color:#00BF00">
       <td style="color:#18A718">
       <td style="color:#308F30">
       <td style="color:#487848">
       <td style="color:#606060">
      <tr>
       <th>25% 
       <td style="color:#008000">
       <td style="color:#107010">
       <td style="color:#206020">
       <td style="color:#305030">
       <td style="color:#404040">
      <tr>
       <th>13% 
       <td style="color:#004000">
       <td style="color:#083808">
       <td style="color:#103010">
       <td style="color:#182818">
       <td style="color:#202020">
      <tr>
       <th>0% 
       <td style="color:#000000">
       <td style="color:#000000">
       <td style="color:#000000">
       <td style="color:#000000">
       <td style="color:#000000">
    </table>
    <table>
     <tbody>
      <tr>
       <th>
       <th colspan="5">150° Green-Cyans 
      <tr>
       <th>
       <th colspan="5">Saturation 
      <tr>
       <th>
       <th>100%
       <th>75%
       <th>50%
       <th>25%
       <th>0% 
      <tr>
       <th>100% 
       <td style="color:#FFFFFF">
       <td style="color:#FFFFFF">
       <td style="color:#FFFFFF">
       <td style="color:#FFFFFF">
       <td style="color:#FFFFFF">
      <tr>
       <th>88% 
       <td style="color:#BFFFDF">
       <td style="color:#C7F7DF">
       <td style="color:#CFEFDF">
       <td style="color:#D7E7DF">
       <td style="color:#DFDFDF">
      <tr>
       <th>75% 
       <td style="color:#80FFBF">
       <td style="color:#8FEFBF">
       <td style="color:#9FDFBF">
       <td style="color:#AFCFBF">
       <td style="color:#BFBFBF">
      <tr>
       <th>63% 
       <td style="color:#40FF9F">
       <td style="color:#58E79F">
       <td style="color:#70CF9F">
       <td style="color:#87B79F">
       <td style="color:#9F9F9F">
      <tr>
       <th>50% 
       <td style="color:#00FF80">
       <td style="color:#20DF80">
       <td style="color:#40BF80">
       <td style="color:#609F80">
       <td style="color:#808080">
      <tr>
       <th>38% 
       <td style="color:#00BF60">
       <td style="color:#18A760">
       <td style="color:#308F60">
       <td style="color:#487860">
       <td style="color:#606060">
      <tr>
       <th>25% 
       <td style="color:#008040">
       <td style="color:#107040">
       <td style="color:#206040">
       <td style="color:#305040">
       <td style="color:#404040">
      <tr>
       <th>13% 
       <td style="color:#004020">
       <td style="color:#083820">
       <td style="color:#103020">
       <td style="color:#182820">
       <td style="color:#202020">
      <tr>
       <th>0% 
       <td style="color:#000000">
       <td style="color:#000000">
       <td style="color:#000000">
       <td style="color:#000000">
       <td style="color:#000000">
    </table>
    <table>
     <tbody>
      <tr>
       <th>
       <th colspan="5">180° Cyans 
      <tr>
       <th>
       <th colspan="5">Saturation 
      <tr>
       <th>
       <th>100%
       <th>75%
       <th>50%
       <th>25%
       <th>0% 
      <tr>
       <th>100% 
       <td style="color:#FFFFFF">
       <td style="color:#FFFFFF">
       <td style="color:#FFFFFF">
       <td style="color:#FFFFFF">
       <td style="color:#FFFFFF">
      <tr>
       <th>88% 
       <td style="color:#BFFFFF">
       <td style="color:#C7F7F7">
       <td style="color:#CFEFEF">
       <td style="color:#D7E7E7">
       <td style="color:#DFDFDF">
      <tr>
       <th>75% 
       <td style="color:#80FFFF">
       <td style="color:#8FEFEF">
       <td style="color:#9FDFDF">
       <td style="color:#AFCFCF">
       <td style="color:#BFBFBF">
      <tr>
       <th>63% 
       <td style="color:#40FFFF">
       <td style="color:#58E7E7">
       <td style="color:#70CFCF">
       <td style="color:#87B7B7">
       <td style="color:#9F9F9F">
      <tr>
       <th>50% 
       <td style="color:#00FFFF">
       <td style="color:#20DFDF">
       <td style="color:#40BFBF">
       <td style="color:#609F9F">
       <td style="color:#808080">
      <tr>
       <th>38% 
       <td style="color:#00BFBF">
       <td style="color:#18A7A7">
       <td style="color:#308F8F">
       <td style="color:#487878">
       <td style="color:#606060">
      <tr>
       <th>25% 
       <td style="color:#008080">
       <td style="color:#107070">
       <td style="color:#206060">
       <td style="color:#305050">
       <td style="color:#404040">
      <tr>
       <th>13% 
       <td style="color:#004040">
       <td style="color:#083838">
       <td style="color:#103030">
       <td style="color:#182828">
       <td style="color:#202020">
      <tr>
       <th>0% 
       <td style="color:#000000">
       <td style="color:#000000">
       <td style="color:#000000">
       <td style="color:#000000">
       <td style="color:#000000">
    </table>
    <table>
     <tbody>
      <tr>
       <th>
       <th colspan="5">210° Cyan-Blues 
      <tr>
       <th>
       <th colspan="5">Saturation 
      <tr>
       <th>
       <th>100%
       <th>75%
       <th>50%
       <th>25%
       <th>0% 
      <tr>
       <th>100% 
       <td style="color:#FFFFFF">
       <td style="color:#FFFFFF">
       <td style="color:#FFFFFF">
       <td style="color:#FFFFFF">
       <td style="color:#FFFFFF">
      <tr>
       <th>88% 
       <td style="color:#BFDFFF">
       <td style="color:#C7DFF7">
       <td style="color:#CFDFEF">
       <td style="color:#D7DFE7">
       <td style="color:#DFDFDF">
      <tr>
       <th>75% 
       <td style="color:#80BFFF">
       <td style="color:#8FBFEF">
       <td style="color:#9FBFDF">
       <td style="color:#AFBFCF">
       <td style="color:#BFBFBF">
      <tr>
       <th>63% 
       <td style="color:#409FFF">
       <td style="color:#589FE7">
       <td style="color:#709FCF">
       <td style="color:#879FB7">
       <td style="color:#9F9F9F">
      <tr>
       <th>50% 
       <td style="color:#0080FF">
       <td style="color:#2080DF">
       <td style="color:#4080BF">
       <td style="color:#60809F">
       <td style="color:#808080">
      <tr>
       <th>38% 
       <td style="color:#0060BF">
       <td style="color:#1860A7">
       <td style="color:#30608F">
       <td style="color:#486078">
       <td style="color:#606060">
      <tr>
       <th>25% 
       <td style="color:#004080">
       <td style="color:#104070">
       <td style="color:#204060">
       <td style="color:#304050">
       <td style="color:#404040">
      <tr>
       <th>13% 
       <td style="color:#002040">
       <td style="color:#082038">
       <td style="color:#102030">
       <td style="color:#182028">
       <td style="color:#202020">
      <tr>
       <th>0% 
       <td style="color:#000000">
       <td style="color:#000000">
       <td style="color:#000000">
       <td style="color:#000000">
       <td style="color:#000000">
    </table>
    <table>
     <tbody>
      <tr>
       <th>
       <th colspan="5">240° Blues 
      <tr>
       <th>
       <th colspan="5">Saturation 
      <tr>
       <th>
       <th>100%
       <th>75%
       <th>50%
       <th>25%
       <th>0% 
      <tr>
       <th>100% 
       <td style="color:#FFFFFF">
       <td style="color:#FFFFFF">
       <td style="color:#FFFFFF">
       <td style="color:#FFFFFF">
       <td style="color:#FFFFFF">
      <tr>
       <th>88% 
       <td style="color:#BFBFFF">
       <td style="color:#C7C7F7">
       <td style="color:#CFCFEF">
       <td style="color:#D7D7E7">
       <td style="color:#DFDFDF">
      <tr>
       <th>75% 
       <td style="color:#8080FF">
       <td style="color:#8F8FEF">
       <td style="color:#9F9FDF">
       <td style="color:#AFAFCF">
       <td style="color:#BFBFBF">
      <tr>
       <th>63% 
       <td style="color:#4040FF">
       <td style="color:#5858E7">
       <td style="color:#7070CF">
       <td style="color:#8787B7">
       <td style="color:#9F9F9F">
      <tr>
       <th>50% 
       <td style="color:#0000FF">
       <td style="color:#2020DF">
       <td style="color:#4040BF">
       <td style="color:#60609F">
       <td style="color:#808080">
      <tr>
       <th>38% 
       <td style="color:#0000BF">
       <td style="color:#1818A7">
       <td style="color:#30308F">
       <td style="color:#484878">
       <td style="color:#606060">
      <tr>
       <th>25% 
       <td style="color:#000080">
       <td style="color:#101070">
       <td style="color:#202060">
       <td style="color:#303050">
       <td style="color:#404040">
      <tr>
       <th>13% 
       <td style="color:#000040">
       <td style="color:#080838">
       <td style="color:#101030">
       <td style="color:#181828">
       <td style="color:#202020">
      <tr>
       <th>0% 
       <td style="color:#000000">
       <td style="color:#000000">
       <td style="color:#000000">
       <td style="color:#000000">
       <td style="color:#000000">
    </table>
    <table>
     <tbody>
      <tr>
       <th>
       <th colspan="5">270° Blue-Magentas 
      <tr>
       <th>
       <th colspan="5">Saturation 
      <tr>
       <th>
       <th>100%
       <th>75%
       <th>50%
       <th>25%
       <th>0% 
      <tr>
       <th>100% 
       <td style="color:#FFFFFF">
       <td style="color:#FFFFFF">
       <td style="color:#FFFFFF">
       <td style="color:#FFFFFF">
       <td style="color:#FFFFFF">
      <tr>
       <th>88% 
       <td style="color:#DFBFFF">
       <td style="color:#DFC7F7">
       <td style="color:#DFCFEF">
       <td style="color:#DFD7E7">
       <td style="color:#DFDFDF">
      <tr>
       <th>75% 
       <td style="color:#BF80FF">
       <td style="color:#BF8FEF">
       <td style="color:#BF9FDF">
       <td style="color:#BFAFCF">
       <td style="color:#BFBFBF">
      <tr>
       <th>63% 
       <td style="color:#9F40FF">
       <td style="color:#9F58E7">
       <td style="color:#9F70CF">
       <td style="color:#9F87B7">
       <td style="color:#9F9F9F">
      <tr>
       <th>50% 
       <td style="color:#8000FF">
       <td style="color:#8020DF">
       <td style="color:#8040BF">
       <td style="color:#80609F">
       <td style="color:#808080">
      <tr>
       <th>38% 
       <td style="color:#6000BF">
       <td style="color:#6018A7">
       <td style="color:#60308F">
       <td style="color:#604878">
       <td style="color:#606060">
      <tr>
       <th>25% 
       <td style="color:#400080">
       <td style="color:#401070">
       <td style="color:#402060">
       <td style="color:#403050">
       <td style="color:#404040">
      <tr>
       <th>13% 
       <td style="color:#200040">
       <td style="color:#200838">
       <td style="color:#201030">
       <td style="color:#201828">
       <td style="color:#202020">
      <tr>
       <th>0% 
       <td style="color:#000000">
       <td style="color:#000000">
       <td style="color:#000000">
       <td style="color:#000000">
       <td style="color:#000000">
    </table>
    <table>
     <tbody>
      <tr>
       <th>
       <th colspan="5">300° Magentas 
      <tr>
       <th>
       <th colspan="5">Saturation 
      <tr>
       <th>
       <th>100%
       <th>75%
       <th>50%
       <th>25%
       <th>0% 
      <tr>
       <th>100% 
       <td style="color:#FFFFFF">
       <td style="color:#FFFFFF">
       <td style="color:#FFFFFF">
       <td style="color:#FFFFFF">
       <td style="color:#FFFFFF">
      <tr>
       <th>88% 
       <td style="color:#FFBFFF">
       <td style="color:#F7C7F7">
       <td style="color:#EFCFEF">
       <td style="color:#E7D7E7">
       <td style="color:#DFDFDF">
      <tr>
       <th>75% 
       <td style="color:#FF80FF">
       <td style="color:#EF8FEF">
       <td style="color:#DF9FDF">
       <td style="color:#CFAFCF">
       <td style="color:#BFBFBF">
      <tr>
       <th>63% 
       <td style="color:#FF40FF">
       <td style="color:#E758E7">
       <td style="color:#CF70CF">
       <td style="color:#B787B7">
       <td style="color:#9F9F9F">
      <tr>
       <th>50% 
       <td style="color:#FF00FF">
       <td style="color:#DF20DF">
       <td style="color:#BF40BF">
       <td style="color:#9F609F">
       <td style="color:#808080">
      <tr>
       <th>38% 
       <td style="color:#BF00BF">
       <td style="color:#A718A7">
       <td style="color:#8F308F">
       <td style="color:#784878">
       <td style="color:#606060">
      <tr>
       <th>25% 
       <td style="color:#800080">
       <td style="color:#701070">
       <td style="color:#602060">
       <td style="color:#503050">
       <td style="color:#404040">
      <tr>
       <th>13% 
       <td style="color:#400040">
       <td style="color:#380838">
       <td style="color:#301030">
       <td style="color:#281828">
       <td style="color:#202020">
      <tr>
       <th>0% 
       <td style="color:#000000">
       <td style="color:#000000">
       <td style="color:#000000">
       <td style="color:#000000">
       <td style="color:#000000">
    </table>
    <table>
     <tbody>
      <tr>
       <th>
       <th colspan="5">330° Magenta-Reds 
      <tr>
       <th>
       <th colspan="5">Saturation 
      <tr>
       <th>
       <th>100%
       <th>75%
       <th>50%
       <th>25%
       <th>0% 
      <tr>
       <th>100% 
       <td style="color:#FFFFFF">
       <td style="color:#FFFFFF">
       <td style="color:#FFFFFF">
       <td style="color:#FFFFFF">
       <td style="color:#FFFFFF">
      <tr>
       <th>88% 
       <td style="color:#FFBFDF">
       <td style="color:#F7C7DF">
       <td style="color:#EFCFDF">
       <td style="color:#E7D7DF">
       <td style="color:#DFDFDF">
      <tr>
       <th>75% 
       <td style="color:#FF80BF">
       <td style="color:#EF8FBF">
       <td style="color:#DF9FBF">
       <td style="color:#CFAFBF">
       <td style="color:#BFBFBF">
      <tr>
       <th>63% 
       <td style="color:#FF409F">
       <td style="color:#E7589F">
       <td style="color:#CF709F">
       <td style="color:#B7879F">
       <td style="color:#9F9F9F">
      <tr>
       <th>50% 
       <td style="color:#FF0080">
       <td style="color:#DF2080">
       <td style="color:#BF4080">
       <td style="color:#9F6080">
       <td style="color:#808080">
      <tr>
       <th>38% 
       <td style="color:#BF0060">
       <td style="color:#A71860">
       <td style="color:#8F3060">
       <td style="color:#784860">
       <td style="color:#606060">
      <tr>
       <th>25% 
       <td style="color:#800040">
       <td style="color:#701040">
       <td style="color:#602040">
       <td style="color:#503040">
       <td style="color:#404040">
      <tr>
       <th>13% 
       <td style="color:#400020">
       <td style="color:#380820">
       <td style="color:#301020">
       <td style="color:#281820">
       <td style="color:#202020">
      <tr>
       <th>0% 
       <td style="color:#000000">
       <td style="color:#000000">
       <td style="color:#000000">
       <td style="color:#000000">
       <td style="color:#000000">
    </table>
   </div>
   <h2 class="heading settled" data-level="8" id="the-hwb-notation"><span class="secno">8. </span><span class="content"> HWB Colors: <a class="css" data-link-type="maybe" href="#funcdef-hwb" id="ref-for-funcdef-hwb③">hwb()</a> function</span><a class="self-link" href="#the-hwb-notation"></a></h2>
   <p>HWB (short for Hue-Whiteness-Blackness) is another method of specifying colors,
	similar to HSL, but often even easier for humans to work with.
	It describes colors with a starting hue,
	then a degree of whiteness and blackness to mix into that base hue.</p>
   <p>Many color-pickers are based on the HWB color system,
	due to its intuitiveness.</p>
   <p>HWB colors resolve to sRGB.</p>
   <figure>
     <img src="images/color-picker.png"> 
    <figcaption> This is a screenshot of Chrome’s color picker,
			shown when a user activates an <code class="lang-markup highlight"><c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>"color"</c-><c- p>></c-></code>.
			The outer wheel is used to select the hue,
			then the relative amounts of white and black are selected by clicking on the inner triangle. </figcaption>
   </figure>
   <p>The syntax of the <a class="css" data-link-type="maybe" href="#funcdef-hwb" id="ref-for-funcdef-hwb④">hwb()</a> function is:</p>
<pre class="prod"><dfn class="dfn-paneled" data-dfn-type="function" data-export id="funcdef-hwb">hwb()</dfn> = hwb( <a class="production" data-link-type="type" href="#typedef-hue" id="ref-for-typedef-hue②">&lt;hue></a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value⑨">&lt;percentage></a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value①⓪">&lt;percentage></a> [ / <a class="production" data-link-type="type" href="#typedef-alpha-value" id="ref-for-typedef-alpha-value⑦">&lt;alpha-value></a> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt⑥">?</a> )
</pre>
   <p>The first argument specifies the hue,
	and is interpreted identically to <a class="css" data-link-type="maybe" href="#funcdef-hsl" id="ref-for-funcdef-hsl⑧">hsl()</a>.</p>
   <p>The second argument specifies the amount of white to mix in,
	as a percentage from <span class="css">0%</span> (no whiteness) to <span class="css">100%</span> (full whiteness).
	Similarly, the third argument specifies the amount of black to mix in,
	also from <span class="css">0%</span> (no blackness) to <span class="css">100%</span> (full blackness).
	Values outside of these ranges make the function invalid.
	If the sum of these two arguments is greater than 100%,
	then at computed-value time they are normalized to add up to 100%,
	with the same relative ratio.</p>
   <p>The fourth argument specifies the alpha channel of the color.
	It’s interpreted identically to the fourth argument of the <a class="css" data-link-type="maybe" href="#funcdef-rgb" id="ref-for-funcdef-rgb①⓪">rgb()</a> function.
	If omitted, it defaults to <span class="css">100%</span>.</p>
   <p>The resulting color can be thought of conceptually as a mixture of paint in the chosen hue,
	white paint, and black paint,
	with the relative amounts of each determined by the percentages.
	If white+black is equal to <span class="css">100%</span> (after normalization),
	it defines an <a data-link-type="dfn" href="https://drafts.csswg.org/css-color-4/#achromatic" id="ref-for-achromatic">achromatic</a> color,
	or some shade of gray,
	without any hint of the chosen hue.</p>
   <h3 class="heading settled" data-level="8.1" id="hwb-to-rgb"><span class="secno">8.1. </span><span class="content"> Converting HWB colors to sRGB colors</span><a class="self-link" href="#hwb-to-rgb"></a></h3>
   <p>Converting an HWB color to sRGB is straightforward,
	and related to how one converts HSL to RGB.
	The following Javascript implementation of the algorithm assumes that the white and black components have already been normalized,
	so their sum is no larger than 100%,
	and have been converted into numbers in the range [0,1].</p>
<pre class="lang-javascript highlight"><c- a>function</c-> hwbToRgb<c- p>(</c->hue<c- p>,</c-> white<c- p>,</c-> black<c- p>)</c-> <c- p>{</c->
  <c- a>var</c-> rgb <c- o>=</c-> hslToRgb<c- p>(</c->hue<c- p>,</c-> <c- mi>1</c-><c- p>,</c-> <c- mf>.5</c-><c- p>);</c->
  <c- k>for</c-><c- p>(</c-><c- a>var</c-> i <c- o>=</c-> <c- mi>0</c-><c- p>;</c-> i <c- o>&lt;</c-> <c- mi>3</c-><c- p>;</c-> i<c- o>++</c-><c- p>)</c-> <c- p>{</c->
    rgb<c- p>[</c->i<c- p>]</c-> <c- o>*=</c-> <c- p>(</c-><c- mi>1</c-> <c- o>-</c-> white <c- o>-</c-> black<c- p>);</c->
    rgb<c- p>[</c->i<c- p>]</c-> <c- o>+=</c-> white<c- p>;</c->
  <c- p>}</c->
  <c- k>return</c-> rgb<c- p>;</c->
<c- p>}</c->
</pre>
   <h3 class="heading settled" data-level="8.2" id="hwb-examples"><span class="secno">8.2. </span><span class="content"> Examples of HWB Colors</span><a class="self-link" href="#hwb-examples"></a></h3>
   <div class="color-table">
    <table>
     <tbody>
      <tr>
       <th>
       <th colspan="6">0° Reds 
      <tr>
       <th><span class="white">W</span>\<span class="black">B</span> 
       <th>0%
       <th>20%
       <th>40%
       <th>60%
       <th>80%
       <th>100% 
      <tr>
       <th>0%
       <td style="color:#ff0000">
       <td style="color:#cc0000">
       <td style="color:#990000">
       <td style="color:#660000">
       <td style="color:#330000">
       <td style="color:#000000">
      <tr>
       <th>20%
       <td style="color:#ff3333">
       <td style="color:#cc3333">
       <td style="color:#993333">
       <td style="color:#663333">
       <td style="color:#333333">
       <td style="color:#2a2b2b">
      <tr>
       <th>40%
       <td style="color:#ff6666">
       <td style="color:#cc6666">
       <td style="color:#996666">
       <td style="color:#666666">
       <td style="color:#555555">
       <td style="color:#494949">
      <tr>
       <th>60%
       <td style="color:#ff9999">
       <td style="color:#cc9999">
       <td style="color:#999999">
       <td style="color:#808080">
       <td style="color:#6d6d6d">
       <td style="color:#606060">
      <tr>
       <th>80%
       <td style="color:#ffcccc">
       <td style="color:#cccccc">
       <td style="color:#aaaaaa">
       <td style="color:#929292">
       <td style="color:#808080">
       <td style="color:#717171">
      <tr>
       <th>100%
       <td style="color:#ffffff">
       <td style="color:#d4d5d5">
       <td style="color:#b6b6b6">
       <td style="color:#9f9f9f">
       <td style="color:#8e8e8e">
       <td style="color:#808080">
    </table>
    <table>
     <tbody>
      <tr>
       <th>
       <th colspan="6">30° Red-Yellows (Oranges) 
      <tr>
       <th><span class="white">W</span>\<span class="black">B</span> 
       <th>0%
       <th>20%
       <th>40%
       <th>60%
       <th>80%
       <th>100% 
      <tr>
       <th>0%
       <td style="color:#ff8000">
       <td style="color:#cc6600">
       <td style="color:#994d00">
       <td style="color:#663300">
       <td style="color:#331900">
       <td style="color:#000000">
      <tr>
       <th>20%
       <td style="color:#ff9933">
       <td style="color:#cc8033">
       <td style="color:#996633">
       <td style="color:#664d33">
       <td style="color:#333333">
       <td style="color:#2a2a2b">
      <tr>
       <th>40%
       <td style="color:#ffb366">
       <td style="color:#cc9966">
       <td style="color:#998066">
       <td style="color:#666666">
       <td style="color:#555555">
       <td style="color:#494949">
      <tr>
       <th>60%
       <td style="color:#ffcc99">
       <td style="color:#ccb399">
       <td style="color:#999999">
       <td style="color:#808080">
       <td style="color:#6d6d6d">
       <td style="color:#606060">
      <tr>
       <th>80%
       <td style="color:#ffe6cc">
       <td style="color:#cccccc">
       <td style="color:#aaaaaa">
       <td style="color:#929292">
       <td style="color:#808080">
       <td style="color:#717171">
      <tr>
       <th>100%
       <td style="color:#ffffff">
       <td style="color:#d4d5d5">
       <td style="color:#b6b6b6">
       <td style="color:#9f9f9f">
       <td style="color:#8e8e8e">
       <td style="color:#808080">
    </table>
    <table>
     <tbody>
      <tr>
       <th>
       <th colspan="6">60° Yellows 
      <tr>
       <th><span class="white">W</span>\<span class="black">B</span> 
       <th>0%
       <th>20%
       <th>40%
       <th>60%
       <th>80%
       <th>100% 
      <tr>
       <th>0%
       <td style="color:#ffff00">
       <td style="color:#cccc00">
       <td style="color:#999900">
       <td style="color:#666600">
       <td style="color:#333300">
       <td style="color:#000000">
      <tr>
       <th>20%
       <td style="color:#ffff33">
       <td style="color:#cccc33">
       <td style="color:#999933">
       <td style="color:#666633">
       <td style="color:#333333">
       <td style="color:#2a2a2b">
      <tr>
       <th>40%
       <td style="color:#ffff66">
       <td style="color:#cccc66">
       <td style="color:#999966">
       <td style="color:#666666">
       <td style="color:#555555">
       <td style="color:#494949">
      <tr>
       <th>60%
       <td style="color:#ffff99">
       <td style="color:#cccc99">
       <td style="color:#999999">
       <td style="color:#808080">
       <td style="color:#6d6d6d">
       <td style="color:#606060">
      <tr>
       <th>80%
       <td style="color:#ffffcc">
       <td style="color:#cccccc">
       <td style="color:#aaaaaa">
       <td style="color:#929292">
       <td style="color:#808080">
       <td style="color:#717171">
      <tr>
       <th>100%
       <td style="color:#ffffff">
       <td style="color:#d5d4d5">
       <td style="color:#b6b6b6">
       <td style="color:#9f9f9f">
       <td style="color:#8e8e8e">
       <td style="color:#808080">
    </table>
    <table>
     <tbody>
      <tr>
       <th>
       <th colspan="6">90° Yellow-Greens 
      <tr>
       <th><span class="white">W</span>\<span class="black">B</span> 
       <th>0%
       <th>20%
       <th>40%
       <th>60%
       <th>80%
       <th>100% 
      <tr>
       <th>0%
       <td style="color:#80ff00">
       <td style="color:#66cc00">
       <td style="color:#4d9900">
       <td style="color:#336600">
       <td style="color:#1a3300">
       <td style="color:#000000">
      <tr>
       <th>20%
       <td style="color:#99ff33">
       <td style="color:#80cc33">
       <td style="color:#669933">
       <td style="color:#4d6633">
       <td style="color:#333333">
       <td style="color:#2a2a2b">
      <tr>
       <th>40%
       <td style="color:#b3ff66">
       <td style="color:#99cc66">
       <td style="color:#809966">
       <td style="color:#666666">
       <td style="color:#555555">
       <td style="color:#494949">
      <tr>
       <th>60%
       <td style="color:#ccff99">
       <td style="color:#b3cc99">
       <td style="color:#999999">
       <td style="color:#808080">
       <td style="color:#6d6d6d">
       <td style="color:#606060">
      <tr>
       <th>80%
       <td style="color:#e6ffcc">
       <td style="color:#cccccc">
       <td style="color:#aaaaaa">
       <td style="color:#929292">
       <td style="color:#808080">
       <td style="color:#717171">
      <tr>
       <th>100%
       <td style="color:#ffffff">
       <td style="color:#d5d4d5">
       <td style="color:#b6b6b6">
       <td style="color:#9f9f9f">
       <td style="color:#8e8e8e">
       <td style="color:#808080">
    </table>
    <table>
     <tbody>
      <tr>
       <th>
       <th colspan="6">120° Greens 
      <tr>
       <th><span class="white">W</span>\<span class="black">B</span> 
       <th>0%
       <th>20%
       <th>40%
       <th>60%
       <th>80%
       <th>100% 
      <tr>
       <th>0%
       <td style="color:#00ff00">
       <td style="color:#00cc00">
       <td style="color:#009900">
       <td style="color:#006600">
       <td style="color:#003300">
       <td style="color:#000000">
      <tr>
       <th>20%
       <td style="color:#33ff33">
       <td style="color:#33cc33">
       <td style="color:#339933">
       <td style="color:#336633">
       <td style="color:#333333">
       <td style="color:#2b2a2b">
      <tr>
       <th>40%
       <td style="color:#66ff66">
       <td style="color:#66cc66">
       <td style="color:#669966">
       <td style="color:#666666">
       <td style="color:#555555">
       <td style="color:#494949">
      <tr>
       <th>60%
       <td style="color:#99ff99">
       <td style="color:#99cc99">
       <td style="color:#999999">
       <td style="color:#808080">
       <td style="color:#6d6d6d">
       <td style="color:#606060">
      <tr>
       <th>80%
       <td style="color:#ccffcc">
       <td style="color:#cccccc">
       <td style="color:#aaaaaa">
       <td style="color:#929292">
       <td style="color:#808080">
       <td style="color:#717171">
      <tr>
       <th>100%
       <td style="color:#ffffff">
       <td style="color:#d5d4d5">
       <td style="color:#b6b6b6">
       <td style="color:#9f9f9f">
       <td style="color:#8e8e8e">
       <td style="color:#808080">
    </table>
    <table>
     <tbody>
      <tr>
       <th>
       <th colspan="6">150° Green-Cyans 
      <tr>
       <th><span class="white">W</span>\<span class="black">B</span> 
       <th>0%
       <th>20%
       <th>40%
       <th>60%
       <th>80%
       <th>100% 
      <tr>
       <th>0%
       <td style="color:#00ff7f">
       <td style="color:#00cc66">
       <td style="color:#00994c">
       <td style="color:#006633">
       <td style="color:#003319">
       <td style="color:#000000">
      <tr>
       <th>20%
       <td style="color:#33ff99">
       <td style="color:#33cc7f">
       <td style="color:#339966">
       <td style="color:#33664c">
       <td style="color:#333333">
       <td style="color:#2b2a2a">
      <tr>
       <th>40%
       <td style="color:#66ffb2">
       <td style="color:#66cc99">
       <td style="color:#66997f">
       <td style="color:#666666">
       <td style="color:#555555">
       <td style="color:#494949">
      <tr>
       <th>60%
       <td style="color:#99ffcc">
       <td style="color:#99ccb3">
       <td style="color:#999999">
       <td style="color:#808080">
       <td style="color:#6d6d6d">
       <td style="color:#606060">
      <tr>
       <th>80%
       <td style="color:#ccffe5">
       <td style="color:#cccccc">
       <td style="color:#aaaaaa">
       <td style="color:#929292">
       <td style="color:#808080">
       <td style="color:#717171">
      <tr>
       <th>100%
       <td style="color:#ffffff">
       <td style="color:#d5d4d5">
       <td style="color:#b6b6b6">
       <td style="color:#9f9f9f">
       <td style="color:#8e8e8e">
       <td style="color:#808080">
    </table>
    <table>
     <tbody>
      <tr>
       <th>
       <th colspan="6">180° Cyans 
      <tr>
       <th><span class="white">W</span>\<span class="black">B</span> 
       <th>0%
       <th>20%
       <th>40%
       <th>60%
       <th>80%
       <th>100% 
      <tr>
       <th>0%
       <td style="color:#00ffff">
       <td style="color:#00cccc">
       <td style="color:#009999">
       <td style="color:#006666">
       <td style="color:#003333">
       <td style="color:#000000">
      <tr>
       <th>20%
       <td style="color:#33ffff">
       <td style="color:#33cccc">
       <td style="color:#339999">
       <td style="color:#336666">
       <td style="color:#333333">
       <td style="color:#2b2a2a">
      <tr>
       <th>40%
       <td style="color:#66ffff">
       <td style="color:#66cccc">
       <td style="color:#669999">
       <td style="color:#666666">
       <td style="color:#555555">
       <td style="color:#494949">
      <tr>
       <th>60%
       <td style="color:#99ffff">
       <td style="color:#99cccc">
       <td style="color:#999999">
       <td style="color:#808080">
       <td style="color:#6d6d6d">
       <td style="color:#606060">
      <tr>
       <th>80%
       <td style="color:#ccffff">
       <td style="color:#cccccc">
       <td style="color:#aaaaaa">
       <td style="color:#929292">
       <td style="color:#808080">
       <td style="color:#717171">
      <tr>
       <th>100%
       <td style="color:#ffffff">
       <td style="color:#d5d5d5">
       <td style="color:#b6b6b6">
       <td style="color:#9f9f9f">
       <td style="color:#8e8e8e">
       <td style="color:#808080">
    </table>
    <table>
     <tbody>
      <tr>
       <th>
       <th colspan="6">210° Cyan-Blues 
      <tr>
       <th><span class="white">W</span>\<span class="black">B</span> 
       <th>0%
       <th>20%
       <th>40%
       <th>60%
       <th>80%
       <th>100% 
      <tr>
       <th>0%
       <td style="color:#007fff">
       <td style="color:#0066cc">
       <td style="color:#004c99">
       <td style="color:#003366">
       <td style="color:#001933">
       <td style="color:#000000">
      <tr>
       <th>20%
       <td style="color:#3399ff">
       <td style="color:#337fcc">
       <td style="color:#336699">
       <td style="color:#334c66">
       <td style="color:#333333">
       <td style="color:#2b2a2a">
      <tr>
       <th>40%
       <td style="color:#66b2ff">
       <td style="color:#6699cc">
       <td style="color:#667f99">
       <td style="color:#666666">
       <td style="color:#555555">
       <td style="color:#494949">
      <tr>
       <th>60%
       <td style="color:#99ccff">
       <td style="color:#99b3cc">
       <td style="color:#999999">
       <td style="color:#808080">
       <td style="color:#6d6d6d">
       <td style="color:#606060">
      <tr>
       <th>80%
       <td style="color:#cce5ff">
       <td style="color:#cccccc">
       <td style="color:#aaaaaa">
       <td style="color:#929292">
       <td style="color:#808080">
       <td style="color:#717171">
      <tr>
       <th>100%
       <td style="color:#ffffff">
       <td style="color:#d5d5d4">
       <td style="color:#b6b6b6">
       <td style="color:#9f9f9f">
       <td style="color:#8e8e8e">
       <td style="color:#808080">
    </table>
    <table>
     <tbody>
      <tr>
       <th>
       <th colspan="6">240° Blues 
      <tr>
       <th><span class="white">W</span>\<span class="black">B</span> 
       <th>0%
       <th>20%
       <th>40%
       <th>60%
       <th>80%
       <th>100% 
      <tr>
       <th>0%
       <td style="color:#0000ff">
       <td style="color:#0000cc">
       <td style="color:#000099">
       <td style="color:#000066">
       <td style="color:#000033">
       <td style="color:#000000">
      <tr>
       <th>20%
       <td style="color:#3333ff">
       <td style="color:#3333cc">
       <td style="color:#333399">
       <td style="color:#333366">
       <td style="color:#333333">
       <td style="color:#2b2b2a">
      <tr>
       <th>40%
       <td style="color:#6666ff">
       <td style="color:#6666cc">
       <td style="color:#666699">
       <td style="color:#666666">
       <td style="color:#555555">
       <td style="color:#494949">
      <tr>
       <th>60%
       <td style="color:#9999ff">
       <td style="color:#9999cc">
       <td style="color:#999999">
       <td style="color:#808080">
       <td style="color:#6d6d6d">
       <td style="color:#606060">
      <tr>
       <th>80%
       <td style="color:#ccccff">
       <td style="color:#cccccc">
       <td style="color:#aaaaaa">
       <td style="color:#929292">
       <td style="color:#808080">
       <td style="color:#717171">
      <tr>
       <th>100%
       <td style="color:#ffffff">
       <td style="color:#d5d5d4">
       <td style="color:#b6b6b6">
       <td style="color:#9f9f9f">
       <td style="color:#8e8e8e">
       <td style="color:#808080">
    </table>
    <table>
     <tbody>
      <tr>
       <th>
       <th colspan="6">270° Blue-Magentas 
      <tr>
       <th><span class="white">W</span>\<span class="black">B</span> 
       <th>0%
       <th>20%
       <th>40%
       <th>60%
       <th>80%
       <th>100% 
      <tr>
       <th>0%
       <td style="color:#7f00ff">
       <td style="color:#6600cc">
       <td style="color:#4c0099">
       <td style="color:#330066">
       <td style="color:#190033">
       <td style="color:#000000">
      <tr>
       <th>20%
       <td style="color:#9933ff">
       <td style="color:#7f33cc">
       <td style="color:#663399">
       <td style="color:#4c3366">
       <td style="color:#333333">
       <td style="color:#2a2b2a">
      <tr>
       <th>40%
       <td style="color:#b266ff">
       <td style="color:#9966cc">
       <td style="color:#7f6699">
       <td style="color:#666666">
       <td style="color:#555555">
       <td style="color:#494949">
      <tr>
       <th>60%
       <td style="color:#cc99ff">
       <td style="color:#b399cc">
       <td style="color:#999999">
       <td style="color:#808080">
       <td style="color:#6d6d6d">
       <td style="color:#606060">
      <tr>
       <th>80%
       <td style="color:#e5ccff">
       <td style="color:#cccccc">
       <td style="color:#aaaaaa">
       <td style="color:#929292">
       <td style="color:#808080">
       <td style="color:#717171">
      <tr>
       <th>100%
       <td style="color:#ffffff">
       <td style="color:#d5d5d4">
       <td style="color:#b6b6b6">
       <td style="color:#9f9f9f">
       <td style="color:#8e8e8e">
       <td style="color:#808080">
    </table>
    <table>
     <tbody>
      <tr>
       <th>
       <th colspan="6">300° Magentas 
      <tr>
       <th><span class="white">W</span>\<span class="black">B</span> 
       <th>0%
       <th>20%
       <th>40%
       <th>60%
       <th>80%
       <th>100% 
      <tr>
       <th>0%
       <td style="color:#ff00ff">
       <td style="color:#cc00cc">
       <td style="color:#990099">
       <td style="color:#660066">
       <td style="color:#330033">
       <td style="color:#000000">
      <tr>
       <th>20%
       <td style="color:#ff33ff">
       <td style="color:#cc33cc">
       <td style="color:#993399">
       <td style="color:#663366">
       <td style="color:#333333">
       <td style="color:#2a2b2a">
      <tr>
       <th>40%
       <td style="color:#ff66ff">
       <td style="color:#cc66cc">
       <td style="color:#996699">
       <td style="color:#666666">
       <td style="color:#555555">
       <td style="color:#494949">
      <tr>
       <th>60%
       <td style="color:#ff99ff">
       <td style="color:#cc99cc">
       <td style="color:#999999">
       <td style="color:#808080">
       <td style="color:#6d6d6d">
       <td style="color:#606060">
      <tr>
       <th>80%
       <td style="color:#ffccff">
       <td style="color:#cccccc">
       <td style="color:#aaaaaa">
       <td style="color:#929292">
       <td style="color:#808080">
       <td style="color:#717171">
      <tr>
       <th>100%
       <td style="color:#ffffff">
       <td style="color:#d4d5d5">
       <td style="color:#b6b6b6">
       <td style="color:#9f9f9f">
       <td style="color:#8e8e8e">
       <td style="color:#808080">
    </table>
    <table>
     <tbody>
      <tr>
       <th>
       <th colspan="6">330° Magenta-Reds 
      <tr>
       <th><span class="white">W</span>\<span class="black">B</span> 
       <th>0%
       <th>20%
       <th>40%
       <th>60%
       <th>80%
       <th>100% 
      <tr>
       <th>0%
       <td style="color:#ff0080">
       <td style="color:#cc0066">
       <td style="color:#99004d">
       <td style="color:#660033">
       <td style="color:#33001a">
       <td style="color:#000000">
      <tr>
       <th>20%
       <td style="color:#ff3399">
       <td style="color:#cc3380">
       <td style="color:#993366">
       <td style="color:#66334d">
       <td style="color:#333333">
       <td style="color:#2a2b2a">
      <tr>
       <th>40%
       <td style="color:#ff66b3">
       <td style="color:#cc6699">
       <td style="color:#996680">
       <td style="color:#666666">
       <td style="color:#555555">
       <td style="color:#494949">
      <tr>
       <th>60%
       <td style="color:#ff99cc">
       <td style="color:#cc99b3">
       <td style="color:#999999">
       <td style="color:#808080">
       <td style="color:#6d6d6d">
       <td style="color:#606060">
      <tr>
       <th>80%
       <td style="color:#ffcce6">
       <td style="color:#cccccc">
       <td style="color:#aaaaaa">
       <td style="color:#929292">
       <td style="color:#808080">
       <td style="color:#717171">
      <tr>
       <th>100%
       <td style="color:#ffffff">
       <td style="color:#d4d5d5">
       <td style="color:#b6b6b6">
       <td style="color:#9f9f9f">
       <td style="color:#8e8e8e">
       <td style="color:#808080">
    </table>
   </div>
   <h2 class="heading settled" data-level="9" id="lab-colors"><span class="secno">9. </span><span class="content"> Device-independent Colors: Lab and LCH</span><a class="self-link" href="#lab-colors"></a></h2>
   <p>Physical measurements of a color are typically expressed as the Lab color space,
	created in 1976 by the <abbr title="Commission Internationale de l’Eclairage">CIE</abbr>.
	Color conversions from one device to another also use Lab as an intermediate step.
	Derived from human vision experiments,
	Lab represents the entire range of color that humans can see.</p>
   <p>Lab is a rectangular coordinate system with a central Lightness axis.
	This value is usually written as a unitless number;
	for compatibility with the rest of CSS, it is written as a percentage.
	100% means an L value of 100, not 1.0.
	L=0% is deep black (no light at all)
	while L=100% is a diffuse white
	(the illuminant is D50 white, a standardized daylight spectrum with a color temperature of 5000K,
	as reflected by a perfect diffuse reflector).
	Values greater than 100 would correspond to specular highlights,
	but their precise color is undefined in this specification.
	Usefully, L=50% is mid gray, by design,
	and equal increments in L are evenly spaced visually:
	the Lab color space is intended to be <em>perceptually uniform</em>.
	The a and b axes convey hue;
	positive values along the a axis are a purplish red
	while negative values are the complementary color, a green.
	Similarly, positive values along the b axis are yellow
	and negative are the complementary blue/violet.
	Desaturated colors have small values of a and b
	and are close to the L axis;
	saturated colors lie far from the L axis.</p>
   <p>D50 is also the whitepoint used for the profile connection space in ICC color interconversion,
	the values used in image editors which offer Lab editing,
	and the value used by physical measurement devices such as spectrometers,
	when they report measured colors in Lab.
	Conversion from colors specified using other white points is called a <dfn data-dfn-type="dfn" data-export id="chromatic-adaptation-transform">chromatic adaptation transform<a class="self-link" href="#chromatic-adaptation-transform"></a></dfn>,
	which models the changes in the human visual system as we adapt to a new lighting condition.
	The Bradford algorithm <a data-link-type="biblio" href="#biblio-bradford-cat">[Bradford-CAT]</a> is the industry standard chromatic adaptation transform,
	and is easy to calculate as it is a simple matrix multiplication.</p>
   <p>LCH has the same L axis as Lab,
	but uses polar coordinates C (chroma) and H (hue).
	C is the geometric distance from the L axis
	and H is the angle from the positive a axis,
	with positive angles being more clockwise.</p>
   <p>In Lab and LCH, if two colors have the same L value,
	they appear to have the same visual lightness—<wbr>regardless of how different their hues are.</p>
   <p class="note" role="note"><span>Note:</span> The Lightness axis in Lab and LCH should not be confused with the L axis in HSL.
	For example, in HSL, the sRGB colors blue (#00F) and yellow (#FF0)
	have the same value of L (50%) even though visually, blue is much darker.
	This is much clearer in Lab:
	sRGB blue is lab(29.567% 68.298,-112.0294)
	while
	sRGB yellow is lab(97.607% -15.753 93.388).
	In Lab, if two colors have the same measured L value,
	they have identical visual lightness.
	HSL and related polar RGB models were developed
	in an attempt
	to give similar usability benefits for RGB that LCH gave to Lab,
	but are significantly less accurate.</p>
   <h3 class="heading settled" data-level="9.1" id="specifying-lab-lch"><span class="secno">9.1. </span><span class="content"> Specifying Lab and LCH: the <a class="css" data-link-type="maybe" href="#funcdef-lab" id="ref-for-funcdef-lab②">lab()</a> and <a class="css" data-link-type="maybe" href="#funcdef-lch" id="ref-for-funcdef-lch③">lch()</a> functional notations</span><a class="self-link" href="#specifying-lab-lch"></a></h3>
   <p>CSS allows colors to be directly expressed in Lab and LCH.</p>
<pre class="prod"><dfn class="dfn-paneled" data-dfn-type="function" data-export id="funcdef-lab">lab()</dfn> = lab( <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value①①">&lt;percentage></a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value⑥">&lt;number></a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value⑦">&lt;number></a> [ / <a class="production" data-link-type="type" href="#typedef-alpha-value" id="ref-for-typedef-alpha-value⑧">&lt;alpha-value></a> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt⑦">?</a> )
</pre>
   <p>The first argument specifies the CIE Lightness.
	This is typically a number between <span class="css">0%</span> (representing black)
	and <span class="css">100%</span> (representing white),
	However, CIE Lightness <em>can</em> exceed this range on some systems,
	with extra-bright whites using a lightness up to <span class="css">400</span>.
	Values less than <span class="css">0%</span> must be clamped to <span class="css">0%</span> at computed-value time;
	values greater than <span class="css">100%</span> are permitted (for forwards compatibility with High Dynamic Range (HDR),
	and must not be clamped.</p>
   <p>The second and third arguments are the distances along the "a" and "b" axises
	in the Lab colorspace,
	as described in the previous section.
	These values are signed
	(allow both positive and negative values)
	and theoretically unbounded
	(but in practice do not exceed ±160).</p>
   <p>There is an optional fourth alpha value,
	separated by a slash,
	and interpreted identically to the <a class="production css" data-link-type="type" href="#typedef-alpha-value" id="ref-for-typedef-alpha-value⑨">&lt;alpha-value></a> in <a class="css" data-link-type="maybe" href="#funcdef-rgb" id="ref-for-funcdef-rgb①①">rgb()</a>.</p>
<pre class="prod"><dfn class="dfn-paneled" data-dfn-type="function" data-export id="funcdef-lch">lch()</dfn> = lch( <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value①②">&lt;percentage></a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value⑧">&lt;number></a> <a class="production" data-link-type="type" href="#typedef-hue" id="ref-for-typedef-hue③">&lt;hue></a> [ / <a class="production" data-link-type="type" href="#typedef-alpha-value" id="ref-for-typedef-alpha-value①⓪">&lt;alpha-value></a> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt⑧">?</a> )
</pre>
   <p>The first argument specifies the CIE Lightness,
	interpreted identically to the Lightness argument of <a class="css" data-link-type="maybe" href="#funcdef-lab" id="ref-for-funcdef-lab③">lab()</a>.</p>
   <p>The second argument is the chroma
	(roughly representing the "amount of color").
	Its minimum useful value is <span class="css">0</span>,
	while its maximum is theoretically unbounded
	(but in practice does not exceed <span class="css">230</span>).
	If the provided value is negative,
	it is clamped to <span class="css">0</span> at computed-value time.</p>
   <p>The third argument is the hue angle.
	It’s interpreted similarly to the <a class="production css" data-link-type="type" href="#typedef-hue" id="ref-for-typedef-hue④">&lt;hue></a> argument of <a class="css" data-link-type="maybe" href="#funcdef-hsl" id="ref-for-funcdef-hsl⑨">hsl()</a>,
	but doesn’t map hues to angles in the same way
	because they are evenly spaced perceptually.
	Instead, <span class="css">0deg</span> points along the positive "a" axis (toward purplish red), <span class="css">90deg</span> points along the positive "b" axis (toward mustard yellow), <span class="css">180deg</span> points along the negative "a" axis (toward greenish cyan),
	and <span class="css">270deg</span> points along the negative "b" axis (toward sky blue).
	If the provided value is negative,
	or is greater than or equal to <span class="css">360deg</span>,
	it is set to the value modulo 360.</p>
   <p>There is an optional fourth alpha value,
	separated by a slash,
	and interpreted identically to the <a class="production css" data-link-type="type" href="#typedef-alpha-value" id="ref-for-typedef-alpha-value①①">&lt;alpha-value></a> in <a class="css" data-link-type="maybe" href="#funcdef-rgb" id="ref-for-funcdef-rgb①②">rgb()</a>.</p>
   <h3 class="heading settled" data-level="9.2" id="rgb-to-lab"><span class="secno">9.2. </span><span class="content"> Converting sRGB colors to Lab colors</span><a class="self-link" href="#rgb-to-lab"></a></h3>
   <p>Conversion from sRGB to Lab requires several steps,
	although in practice all but the first step are linear calculations and can be combined.</p>
   <ol>
    <li>Convert from sRGB to <dfn data-dfn-type="dfn" data-export id="linear-light-sRGB">linear-light sRGB<a class="self-link" href="#linear-light-sRGB"></a></dfn> (undo gamma encoding).
			This has the same gamut as sRGB,
			but is now additive,
			so that arithmetic operations on the values
			give the correct results. 
    <li>Convert from linear sRGB to CIE XYZ 
    <li>Convert from a D65 whitepoint (used by sRGB) to the D50 whitepoint used
			in Lab, with the Bradford transform <a data-link-type="biblio" href="#biblio-bradford-cat">[Bradford-CAT]</a> 
    <li>Convert D50-adapted XYZ to Lab 
   </ol>
   <p>There is sample JavaScript code for this conversion in <a href="#color-conversion-code">§ 15 Sample code for color conversions</a>.</p>
   <h3 class="heading settled" data-level="9.3" id="lab-to-rgb"><span class="secno">9.3. </span><span class="content"> Converting Lab colors to sRGB  colors</span><a class="self-link" href="#lab-to-rgb"></a></h3>
   <p>Conversion from Lab to sRGB also requires multiple steps,
	and again in practice all but the last step are linear calculations and can be combined.</p>
   <ol>
    <li>Convert Lab to (D50-adapted) XYZ 
    <li>Convert from a D50 whitepoint (used by Lab) to the D65 whitepoint used
			in sRGB, with the Bradford transform 
    <li>Convert from (D65-adapted) CIE XYZ to linear sRGB 
    <li>Convert from linear-light sRGB to sRGB (do gamma encoding) 
   </ol>
   <h3 class="heading settled" data-level="9.4" id="lab-to-lch"><span class="secno">9.4. </span><span class="content"> Converting Lab colors to LCH colors</span><a class="self-link" href="#lab-to-lch"></a></h3>
   <p>Conversion to LCH is trivial:</p>
   <ol>
    <li>H = atan2(b, a) 
    <li>C = sqrt(a^2 + b^2) 
    <li>L is the same 
   </ol>
   <h3 class="heading settled" data-level="9.5" id="lch-to-lab"><span class="secno">9.5. </span><span class="content"> Converting LCH colors to Lab  colors</span><a class="self-link" href="#lch-to-lab"></a></h3>
   <p>Conversion to Lab is trivial:</p>
   <ol>
    <li>a = C cos(H) 
    <li>b = C sin(H) 
    <li>L is the same 
   </ol>
   <h2 class="heading settled" data-level="10" id="icc-colors"><span class="secno">10. </span><span class="content"> Profiled, Device-dependent Colors</span><a class="self-link" href="#icc-colors"></a></h2>
   <p>CSS allows <a data-link-type="dfn" href="#color" id="ref-for-color">colors</a> to be specified by reference to a color profile.
	This could be for example a calibrated CMYK printer,
	or an RGB colorspace,
	or any other color or monochrome output device which has been characterized.</p>
   <p>In addition, for convenience,
	CSS provides several predefined RGB color spaces
	including <a class="css" data-link-type="maybe" href="#valdef-color-display-p3" id="ref-for-valdef-color-display-p3">display-p3</a>' <a data-link-type="biblio" href="#biblio-dci-p3">[DCI-P3]</a>,
	which is a wide gamut space typical of current wide-gamut monitors, <a class="css" data-link-type="maybe" href="#valdef-color-prophoto-rgb" id="ref-for-valdef-color-prophoto-rgb">prophoto-rgb</a>', widely used by photographers
	and <a class="css" data-link-type="maybe" href="#valdef-color-rec-2020" id="ref-for-valdef-color-rec-2020">rec-2020</a>' <a data-link-type="biblio" href="#biblio-rec2020">[Rec.2020]</a>,
	which is a broadcast industry standard,
	ultra-wide gamut space capable of representing almost all visible real-world colors.</p>
   <p>These can be used without supplying a separate profile.</p>
   <div class="example" id="example-73617555">
    <a class="self-link" href="#example-73617555"></a> This example specifies four profiled colors:
		for a standard SWOP-coated CMYK press,
		for a wide-gamut seven-ink printer,
		for ProPhoto RGB,
		and for the display-p3 standard RGB space.
		In each case, the numerical parameters
		are in the range 0.0 to 1.0
		(rather than, for example, 0 to 255). 
<pre>color: color(swopc 0.0134 0.8078 0.7451 0.3019);
color: color(indigo 0.0941 0.6274 0.3372 0.1647 0 0.0706 0.1216);
color: color(prophoto-rgb 0.9137 0.5882 0.4784);
color: color(display-p3 0.3804 0.9921 0.1412);
</pre>
    <p>The colors not using a predefined colorspace
		also need a matching <a class="css" data-link-type="maybe" href="#at-ruledef-profile" id="ref-for-at-ruledef-profile">@color-profile</a> at-rule
		somewhere in the stylesheet,
		to connect the name with the profile data.</p>
<pre>@color-profile swopc {
  src: url('http://example.org/swop-coated.icc');}
@color-profile indigo {
  src: url('http://example.org/indigo-seven.icc');}
</pre>
   </div>
   <h3 class="heading settled" data-level="10.1" id="color-function"><span class="secno">10.1. </span><span class="content">Specifying profiled colors: the <a class="css" data-link-type="maybe" href="#funcdef-color" id="ref-for-funcdef-color②">color()</a> function</span><a class="self-link" href="#color-function"></a></h3>
   <p>The <a class="css" data-link-type="maybe" href="#funcdef-color" id="ref-for-funcdef-color③">color()</a> function allows a color to be specified
	in a particular colorspace
	(rather than the implicit sRGB colorspace that the other color functions operate in).
	Its syntax is:</p>
<pre class="prod"><dfn class="dfn-paneled" data-dfn-type="function" data-export id="funcdef-color">color()</dfn> = color( [ <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-ident" id="ref-for-typedef-ident②">&lt;ident></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt⑨">?</a> [ <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value⑨">&lt;number></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-one-plus" id="ref-for-mult-one-plus">+</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⑥">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#string-value" id="ref-for-string-value">&lt;string></a> ] [ / <a class="production" data-link-type="type" href="#typedef-alpha-value" id="ref-for-typedef-alpha-value①②">&lt;alpha-value></a> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt①⓪">?</a> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-comma" id="ref-for-mult-comma②">#</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-comma" id="ref-for-comb-comma⑤">,</a> <a class="production" data-link-type="type" href="#typedef-color" id="ref-for-typedef-color①①" title="Expands to: indigo | gold | firebrick | indianred | yellow | darkolivegreen | darkseagreen | slategrey | darkslategrey | mediumvioletred | mediumorchid | transparent | chartreuse | mediumslateblue | black | springgreen | crimson | lightsalmon | brown | turquoise | olivedrab | cyan | silver | skyblue | gray | darkturquoise | goldenrod | darkgreen | darkviolet | darkgray | lightpink | teal | darkmagenta | lightgoldenrodyellow | lavender | yellowgreen | thistle | violet | navy | dimgrey | orchid | blue | ghostwhite | honeydew | cornflowerblue | darkblue | darkkhaki | mediumpurple | cornsilk | red | bisque | slategray | darkcyan | khaki | wheat | deepskyblue | rebeccapurple | darkred | steelblue | aliceblue | lightslategrey | gainsboro | mediumturquoise | floralwhite | coral | purple | lightgrey | lightcyan | darksalmon | beige | azure | lightsteelblue | oldlace | greenyellow | royalblue | lightseagreen | mistyrose | sienna | lightcoral | orangered | navajowhite | lime | palegreen | burlywood | seashell | mediumspringgreen | fuchsia | papayawhip | blanchedalmond | peru | aquamarine | white | darkslategray | tomato | ivory | dodgerblue | currentcolor | lemonchiffon | chocolate | orange | forestgreen | darkgrey | olive | mintcream | antiquewhite | darkorange | cadetblue | moccasin | limegreen | saddlebrown | grey | darkslateblue | lightskyblue | deeppink | plum | aqua | darkgoldenrod | maroon | sandybrown | magenta | tan | rosybrown | pink | lightblue | palevioletred | mediumseagreen | slateblue | dimgray | powderblue | seagreen | snow | mediumblue | midnightblue | paleturquoise | palegoldenrod | whitesmoke | darkorchid | salmon | lightslategray | lawngreen | lightgreen | lightgray | hotpink | lightyellow | lavenderblush | linen | mediumaquamarine | green | blueviolet | peachpuff">&lt;color></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt①①">?</a> )
</pre>
   <p>The color function takes one or more comma-separated arguments,
	with each argument specifying a color,
	and later colors acting as "fallback" if an earlier color can’t be displayed
	(for example, if the colorspace it specifies hasn’t been loaded yet).</p>
   <p>Each argument has the following form:</p>
   <ul>
    <li data-md>
     <p>An optional <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-ident" id="ref-for-typedef-ident③">&lt;ident></a> denoting the colorspace.
This can be one of the predefined colorspaces
(such as <a class="css" data-link-type="maybe" href="#valdef-color-display-p3" id="ref-for-valdef-color-display-p3①">display-p3</a>),
or one defined by a <a class="css" data-link-type="maybe" href="#at-ruledef-profile" id="ref-for-at-ruledef-profile①">@color-profile</a> rule.
If omitted, it defaults to the predefined <a class="css" data-link-type="maybe" href="#valdef-color-srgb" id="ref-for-valdef-color-srgb">srgb</a> color profile.</p>
     <p>If the <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-ident" id="ref-for-typedef-ident④">&lt;ident></a> names a non-existent colorspace,
this argument represents an <a data-link-type="dfn" href="#invalid-color" id="ref-for-invalid-color">invalid color</a>.</p>
    <li data-md>
     <p>Either one or more <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value①⓪">&lt;number></a>s providing the parameter values that the colorspace takes,
or a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#string-value" id="ref-for-string-value①">&lt;string></a> giving the name of a color defined by the colorspace.</p>
     <dl class="switch">
      <dt>If the colorspace takes numeric parameters 
      <dd>
        If more <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value①①">&lt;number></a>s are provided than parameters that the colorspace takes,
		the excess <span class="production" id="ref-for-number-value①②">&lt;number></span>s at the end are ignored. 
       <p>If less <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value①③">&lt;number></a>s are provided than parameters that the colorspace takes,
		the missing parameters default to <span class="css">0</span>.
		(This is particularly convenient for multichannel printers
		where the additional inks are spot colors or varnishes
		that most colors on the page won’t use.)</p>
       <p>If a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#string-value" id="ref-for-string-value②">&lt;string></a> is provided,
		this argument represents an <a data-link-type="dfn" href="#invalid-color" id="ref-for-invalid-color①">invalid color</a>.</p>
      <dt>If the colorspace defines named colors 
      <dd> If <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value①④">&lt;number></a>s are provided,
		or a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#string-value" id="ref-for-string-value③">&lt;string></a> is provided that doesn’t match any of the color names
		defined by the colorspace,
		this argument represents an <a data-link-type="dfn" href="#invalid-color" id="ref-for-invalid-color②">invalid color</a>. 
     </dl>
    <li data-md>
     <p>An optional slash-separated <a class="production css" data-link-type="type" href="#typedef-alpha-value" id="ref-for-typedef-alpha-value①③">&lt;alpha-value></a>.
This is interpreted the same way as the <span class="production" id="ref-for-typedef-alpha-value①④">&lt;alpha-value></span> in <a class="css" data-link-type="maybe" href="#funcdef-rgb" id="ref-for-funcdef-rgb①③">rgb()</a>,
and if omitted it defaults to <span class="css">100%</span>.</p>
   </ul>
   <p>After one or more arguments of the above form,
	a final <a class="production css" data-link-type="type" href="#typedef-color" id="ref-for-typedef-color①②" title="Expands to: indigo | gold | firebrick | indianred | yellow | darkolivegreen | darkseagreen | slategrey | darkslategrey | mediumvioletred | mediumorchid | transparent | chartreuse | mediumslateblue | black | springgreen | crimson | lightsalmon | brown | turquoise | olivedrab | cyan | silver | skyblue | gray | darkturquoise | goldenrod | darkgreen | darkviolet | darkgray | lightpink | teal | darkmagenta | lightgoldenrodyellow | lavender | yellowgreen | thistle | violet | navy | dimgrey | orchid | blue | ghostwhite | honeydew | cornflowerblue | darkblue | darkkhaki | mediumpurple | cornsilk | red | bisque | slategray | darkcyan | khaki | wheat | deepskyblue | rebeccapurple | darkred | steelblue | aliceblue | lightslategrey | gainsboro | mediumturquoise | floralwhite | coral | purple | lightgrey | lightcyan | darksalmon | beige | azure | lightsteelblue | oldlace | greenyellow | royalblue | lightseagreen | mistyrose | sienna | lightcoral | orangered | navajowhite | lime | palegreen | burlywood | seashell | mediumspringgreen | fuchsia | papayawhip | blanchedalmond | peru | aquamarine | white | darkslategray | tomato | ivory | dodgerblue | currentcolor | lemonchiffon | chocolate | orange | forestgreen | darkgrey | olive | mintcream | antiquewhite | darkorange | cadetblue | moccasin | limegreen | saddlebrown | grey | darkslateblue | lightskyblue | deeppink | plum | aqua | darkgoldenrod | maroon | sandybrown | magenta | tan | rosybrown | pink | lightblue | palevioletred | mediumseagreen | slateblue | dimgray | powderblue | seagreen | snow | mediumblue | midnightblue | paleturquoise | palegoldenrod | whitesmoke | darkorchid | salmon | lightslategray | lawngreen | lightgreen | lightgray | hotpink | lightyellow | lavenderblush | linen | mediumaquamarine | green | blueviolet | peachpuff">&lt;color></a> argument
	using any CSS color syntax
	can be provided.</p>
   <p>The <a class="css" data-link-type="maybe" href="#funcdef-color" id="ref-for-funcdef-color④">color()</a> function represents the color
	specified by the first of its arguments that represent a <dfn data-dfn-type="dfn" data-export id="valid-color">valid color<a class="self-link" href="#valid-color"></a></dfn> (that is, the first argument that isn’t an <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="invalid-color">invalid color</dfn>).
	If all of its arguments represent <a data-link-type="dfn" href="#invalid-color" id="ref-for-invalid-color③">invalid colors</a>, <span class="css" id="ref-for-funcdef-color⑤">color()</span> represents <a data-link-type="dfn" href="#opaque-black" id="ref-for-opaque-black">opaque black</a>.</p>
   <h3 class="heading settled" data-level="10.2" id="predefined"><span class="secno">10.2. </span><span class="content"> Predefined colorspaces: <a class="css" data-link-type="maybe" href="#valdef-color-srgb" id="ref-for-valdef-color-srgb①">srgb</a>, <a class="css" data-link-type="maybe" href="#valdef-color-display-p3" id="ref-for-valdef-color-display-p3②">display-p3</a>, <a class="css" data-link-type="maybe" href="#valdef-color-a98-rgb" id="ref-for-valdef-color-a98-rgb">a98-rgb</a>, <a class="css" data-link-type="maybe" href="#valdef-color-prophoto-rgb" id="ref-for-valdef-color-prophoto-rgb①">prophoto-rgb</a> and <a class="css" data-link-type="maybe" href="#valdef-color-rec-2020" id="ref-for-valdef-color-rec-2020①">rec-2020</a>.</span><a class="self-link" href="#predefined"></a></h3>
   <p>The following colorspaces are predefined for use in the <a class="css" data-link-type="maybe" href="#funcdef-color" id="ref-for-funcdef-color⑥">color()</a> function.
	They can be used without any <a class="css" data-link-type="maybe" href="#at-ruledef-profile" id="ref-for-at-ruledef-profile②">@color-profile</a> rule.</p>
   <dl>
    <dt><dfn class="dfn-paneled css" data-dfn-for="color()" data-dfn-type="value" data-export id="valdef-color-srgb">srgb</dfn> 
    <dd>
      The <a class="css" data-link-type="maybe" href="#valdef-color-srgb" id="ref-for-valdef-color-srgb②">srgb</a> <a data-link-type="biblio" href="#biblio-srgb">[SRGB]</a> colorspace accepts three numeric parameters,
			representing the red, green, and blue channels of the color,
			with each having a valid range of [0, 1].
			The whitepoint is D65
			(a daylight white, with a correlated color temperature of 6504°K). 
     <p><a data-link-type="biblio" href="#biblio-srgb">[SRGB]</a> specifies two viewing conditions, <em>encoding</em> and <em>typical</em>. The <a data-link-type="biblio" href="#biblio-icc">[ICC]</a> recommends using the <em>encoding</em> conditions for color conversion and for optimal viewing, which are
			the values in the table below.</p>
     <p>sRGB is the default colorspace for CSS,
			identical to specifying a color with the <a class="css" data-link-type="maybe" href="#funcdef-rgb" id="ref-for-funcdef-rgb①④">rgb()</a> function.</p>
     <p>It has the following characteristics:</p>
     <table>
      <thead>
       <tr>
        <td>
        <td>x
        <td>y
      <tbody>
       <tr>
        <th>Red chromaticity
        <td>0.640
        <td>0.330
       <tr>
        <th>Green chromaticity
        <td>0.300
        <td>0.600
       <tr>
        <th>Blue chromaticity
        <td>0.150
        <td>0.060
       <tr>
        <th>White chromaticity
        <td>0.3127
        <td>0.3290
       <tr>
        <th>Transfer function
        <td colspan="2">see below
       <tr>
        <th>White luminance
        <td colspan="2">80.0 cd/m<sup>2</sup>
       <tr>
        <th>Black luminance
        <td colspan="2">0.80 cd/m<sup>2</sup>
     </table>
<pre class="lang-javascript highlight"><c- a>var</c-> Cl<c- p>;</c->
<c- k>if</c-> <c- p>(</c->C <c- o>&lt;=</c-> <c- mf>0.04045</c-><c- p>)</c->
  Cl <c- o>=</c-> C <c- o>/</c-> <c- mf>12.92</c-><c- p>;</c->
<c- k>else</c->
  Cl <c- o>=</c-> Math<c- p>.</c->pow<c- p>((</c->C <c- o>+</c-> <c- mf>0.055</c-><c- p>)</c-> <c- o>/</c-> <c- mf>1.055</c-><c- p>,</c-> <c- mf>2.4</c-><c- p>);</c->
</pre>
     <p>C is the red, green or blue component.</p>
    <dt><dfn class="dfn-paneled css" data-dfn-for="color()" data-dfn-type="value" data-export id="valdef-color-display-p3">display-p3</dfn> 
    <dd>
      The <a class="css" data-link-type="maybe" href="#valdef-color-display-p3" id="ref-for-valdef-color-display-p3③">display-p3</a> colorspace accepts three numeric parameters,
			representing the red, green, and blue channels of the color,
			with each having a valid range of [0, 1].
			It uses the same primary chromaticities as <a data-link-type="biblio" href="#biblio-dci-p3">[DCI-P3]</a>,
			but with a D65 whitepoint and the same transfer curve as sRGB. 
     <p>It has the following characteristics:</p>
     <table>
      <thead>
       <tr>
        <td>
        <td>x
        <td>y
      <tbody>
       <tr>
        <th>Red chromaticity
        <td>0.680
        <td>0.320
       <tr>
        <th>Green chromaticity
        <td>0.265
        <td>0.690
       <tr>
        <th>Blue chromaticity
        <td>0.150
        <td>0.060
       <tr>
        <th>White chromaticity
        <td>0.3127
        <td>0.3290
       <tr>
        <th>Transfer function
        <td colspan="2">same as srgb
       <tr>
        <th>White luminance
        <td colspan="2">80.0 cd/m<sup>2</sup>
       <tr>
        <th>Black luminance
        <td colspan="2">0.80 cd/m<sup>2</sup>
     </table>
    <dt><dfn class="dfn-paneled css" data-dfn-for="color()" data-dfn-type="value" data-export id="valdef-color-a98-rgb">a98-rgb</dfn> 
    <dd>
      The <a class="css" data-link-type="maybe" href="#valdef-color-a98-rgb" id="ref-for-valdef-color-a98-rgb①">a98-rgb</a> colorspace accepts three numeric parameters,
			representing the red, green, and blue channels of the color,
			with each having a valid range of [0, 1]. The transfer curve is
			a gamma function, close to but not exactly 1/2.2. 
     <p><a class="css" data-link-type="maybe" href="#valdef-color-a98-rgb" id="ref-for-valdef-color-a98-rgb②">a98-rgb</a> is compatible with Adobe® RGB (1998) <span>[AdobeRGB]</span>.</p>
     <p>Adobe® RGB (1998) uses primaries originally derived
			from the SMPTE 240M standard;
			errors in the original conversion turned out
			to produce a colorspace that was useful for digital photography,
			so Adobe® RGB (1998) is a common wider-gamut colorspace for
			photographic images. The <a class="css" data-link-type="maybe" href="#valdef-color-a98-rgb" id="ref-for-valdef-color-a98-rgb③">a98-rgb</a> colorspace allows CSS to
			specify colors that will match colors in such images
			having the same RGB values.</p>
     <p>It has the following characteristics:</p>
     <table>
      <thead>
       <tr>
        <td>
        <td>x
        <td>y
      <tbody>
       <tr>
        <th>Red chromaticity
        <td>0.6400
        <td>0.3300
       <tr>
        <th>Green chromaticity
        <td>0.2100
        <td>0.7100
       <tr>
        <th>Blue chromaticity
        <td>0.1500
        <td>0.0600
       <tr>
        <th>White chromaticity
        <td>0.3127
        <td>0.3290
       <tr>
        <th>Transfer function
        <td colspan="2">256/563 
       <tr>
        <th>White luminance
        <td colspan="2">160.0 cd/m<sup>2</sup>
       <tr>
        <th>Black luminance
        <td colspan="2">0.5557 cd/m<sup>2</sup>
     </table>
    <dt><dfn class="dfn-paneled css" data-dfn-for="color()" data-dfn-type="value" data-export id="valdef-color-prophoto-rgb">prophoto-rgb</dfn> 
    <dd>
      The <a class="css" data-link-type="maybe" href="#valdef-color-prophoto-rgb" id="ref-for-valdef-color-prophoto-rgb②">prophoto-rgb</a> colorspace accepts three numeric parameters,
				representing the red, green, and blue channels of the color,
				with each having a valid range of [0, 1]. The transfer curve is
				a gamma function with a value of 1/1.8.
				The white point is D50, the same as is used by CIE Lab. Thus,
				conversion to Lab does not require the chromatic adaptation step. 
     <p>The ProPhoto RGB space uses primaries chosen to allow
				a wide color gamut and to minimise hue shifts under tonal manipulation.
				It is often used in digital photography as a wide gamut
				colorspace for the master version of
				photographic images. The <a class="css" data-link-type="maybe" href="#valdef-color-prophoto-rgb" id="ref-for-valdef-color-prophoto-rgb③">prophoto-rgb</a> colorspace allows CSS to
				specify colors that will match colors in such images
				having the same RGB values.</p>
     <p>The white luminance is given as a range, and
				the viewing flare (and thus, the black luminance)
				is 0.5% to 1.0% of this.</p>
     <p>It has the following characteristics:</p>
     <table>
      <thead>
       <tr>
        <td>
        <td>x
        <td>y
      <tbody>
       <tr>
        <th>Red chromaticity
        <td>0.7347
        <td>0.2653
       <tr>
        <th>Green chromaticity
        <td>0.1596
        <td>0.8404
       <tr>
        <th>Blue chromaticity
        <td>0.0366
        <td>0.0001
       <tr>
        <th>White chromaticity
        <td>0.3457
        <td>0.3585
       <tr>
        <th>Transfer function
        <td colspan="2">1/1.800 
       <tr>
        <th>White luminance
        <td colspan="2">160.0 to 640.0 cd/m<sup>2</sup>
       <tr>
        <th>Black luminance
        <td colspan="2">See text
     </table>
    <dt><dfn class="dfn-paneled css" data-dfn-for="color()" data-dfn-type="value" data-export id="valdef-color-rec-2020">rec-2020</dfn> 
    <dd>
      The <a class="css" data-link-type="maybe" href="#valdef-color-rec-2020" id="ref-for-valdef-color-rec-2020②">rec-2020</a> <a data-link-type="biblio" href="#biblio-rec2020">[Rec.2020]</a> colorspace accepts three numeric parameters,
			representing the red, green, and blue channels of the color,
			with each having a valid range of [0, 1]. ITU Reference 2020 is used for High Definition, 4k and 8k television. 
     <p>It has the following characteristics:</p>
     <table>
      <thead>
       <tr>
        <td>
        <td>x
        <td>y
      <tbody>
       <tr>
        <th>Red chromaticity
        <td>0.708
        <td>0.292
       <tr>
        <th>Green chromaticity
        <td>0.170
        <td>0.797
       <tr>
        <th>Blue chromaticity
        <td>0.131
        <td>0.046
       <tr>
        <th>White chromaticity
        <td>0.3120
        <td>0.3290
       <tr>
        <th>Transfer function
        <td colspan="2">1/2.4 (see note)
     </table>
     <p class="note" role="note"><span>Note:</span> rec-2020 references a different transfer curve for cameras. However
			this curve is never used in production cameras or 2020 displays.<br> "In typical production practice the encoding function of image sources is adjusted so that the final picture has the desired look, as viewed on a reference monitor having the reference decoding function of Recommendation ITU-R BT.1886, in the reference viewing environment defined in Recommendation ITU-R BT.2035."<br> The transfer function (1886) for reference Rec.2020 displays is gamma 2.4 <a data-link-type="biblio" href="#biblio-rec2020">[Rec.2020]</a></p>
   </dl>
   <h4 class="heading settled" data-level="10.2.1" id="predefined-to-lab"><span class="secno">10.2.1. </span><span class="content"> Converting predefined colorspaces to Lab</span><a class="self-link" href="#predefined-to-lab"></a></h4>
   <p>For both predefined color spaces,
	conversion to Lab requires several steps,
	although in practice all but the first step are linear calculations and can be combined.</p>
   <ol>
    <li>Convert from gamma-corrected RGB to linear-light RGB (undo gamma encoding) 
    <li>Convert from linear RGB to CIE XYZ 
    <li>Convert from a D65 whitepoint (used by both display-p3 and rec-2020) to the D50 whitepoint used in Lab,
			with the Bradford transform 
    <li>Convert D50-adapted XYZ to Lab 
   </ol>
   <h4 class="heading settled" data-level="10.2.2" id="lab-to-predefined"><span class="secno">10.2.2. </span><span class="content"> Converting Lab to predefined colorspaces</span><a class="self-link" href="#lab-to-predefined"></a></h4>
   <p>Conversion from Lab to display-p3 or rec-2020 also requires multiple steps,
	and again in practice all but the last step are linear calculations and can be combined.</p>
   <ol>
    <li>Convert Lab to (D50-adapted) XYZ 
    <li>Convert from a D50 whitepoint (used by Lab) to the D65 whitepoint used in sRGB,
			with the Bradford transform 
    <li>Convert from (D65-adapted) CIE XYZ to linear RGB 
    <li>Convert from linear-light RGB to RGB (do gamma encoding) 
   </ol>
   <p>Implementations may choose to implement these steps in some other way
	(for example, using an ICC profile with relative colorimetric rendering intent)
	provided the results are the same for colors inside the source and destination gamuts.</p>
   <h3 class="heading settled" data-level="10.3" id="at-profile"><span class="secno">10.3. </span><span class="content"> Specifying a color profile: the <a class="css" data-link-type="maybe" href="#at-ruledef-profile" id="ref-for-at-ruledef-profile③">@color-profile</a> at-rule</span><a class="self-link" href="#at-profile"></a></h3>
   <p>The <dfn class="dfn-paneled css" data-dfn-type="at-rule" data-export id="at-ruledef-profile">@color-profile</dfn> rule
	defines and names a <dfn class="dfn-paneled" data-dfn-type="dfn" data-local-lt="color profile" data-lt="CSS color profile" data-noexport id="css-color-profile">color profile</dfn> which can later be used in the <a class="css" data-link-type="maybe" href="#funcdef-color" id="ref-for-funcdef-color⑦">color()</a> function to specify a color.
	It’s defined as:</p>
<pre class="prod">@color-profile = @color-profile <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#identifier-value" id="ref-for-identifier-value">&lt;custom-ident></a> { <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-declaration-list" id="ref-for-typedef-declaration-list">&lt;declaration-list></a> }
</pre>
   <p>The <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#identifier-value" id="ref-for-identifier-value①">&lt;custom-ident></a> gives the <a data-link-type="dfn" href="#css-color-profile" id="ref-for-css-color-profile">color profile’s</a> name.
	All of the predefined colorspace keywords
	(<a class="css" data-link-type="maybe" href="#valdef-color-srgb" id="ref-for-valdef-color-srgb③">srgb</a>, <a class="css" data-link-type="maybe" href="#valdef-color-display-p3" id="ref-for-valdef-color-display-p3④">display-p3</a>, <a class="css" data-link-type="maybe" href="#valdef-color-a98-rgb" id="ref-for-valdef-color-a98-rgb④">a98-rgb</a>, <a class="css" data-link-type="maybe" href="#valdef-color-prophoto-rgb" id="ref-for-valdef-color-prophoto-rgb④">prophoto-rgb</a>, <a class="css" data-link-type="maybe" href="#valdef-color-rec-2020" id="ref-for-valdef-color-rec-2020③">rec-2020</a>)
	are excluded from this <span class="production" id="ref-for-identifier-value②">&lt;custom-ident></span>,
	as they’re predefined by this specification and always available.</p>
   <p>The <a class="css" data-link-type="maybe" href="#at-ruledef-profile" id="ref-for-at-ruledef-profile④">@color-profile</a> rule accepts the descriptors defined in this specification.</p>
   <table class="def descdef">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-for="@color-profile" data-dfn-type="descriptor" data-export id="descdef-color-profile-src">src</dfn>
     <tr>
      <th>For:
      <td><a class="css" data-link-type="at-rule" href="#at-ruledef-profile" id="ref-for-at-ruledef-profile⑤">@color-profile</a> 
     <tr>
      <th>Value:
      <td class="prod"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#url-value" id="ref-for-url-value">&lt;url></a> 
     <tr>
      <th>Initial:
      <td>n/a 
   </table>
   <p>The <a class="property" data-link-type="propdesc" href="#descdef-color-profile-src" id="ref-for-descdef-color-profile-src">src</a> descriptor specifies the URL to retrieve the color-profile information from.</p>
   <table class="def descdef">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-for="@color-profile" data-dfn-type="descriptor" data-export id="descdef-color-profile-rendering-intent">rendering-intent</dfn>
     <tr>
      <th>For:
      <td><a class="css" data-link-type="at-rule" href="#at-ruledef-profile" id="ref-for-at-ruledef-profile⑥">@color-profile</a> 
     <tr>
      <th>Value:
      <td class="prod">relative-colorimetric <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⑦">|</a> absolute-colorimetric <span id="ref-for-comb-one①⑧">|</span> perceptual <span id="ref-for-comb-one①⑨">|</span> saturation 
     <tr>
      <th>Initial:
      <td>relative-colorimetric 
   </table>
   <p><a data-link-type="dfn" href="#css-color-profile" id="ref-for-css-color-profile①">Color profiles</a> contain “rendering intents”,
	which define how to map their color to smaller gamuts than they’re defined over.
	Often a profile will contain only a single intent,
	but when there are multiple,
	the <a class="property" data-link-type="propdesc" href="#descdef-color-profile-rendering-intent" id="ref-for-descdef-color-profile-rendering-intent">rendering-intent</a> descriptor chooses one of them to use.</p>
   <p>The four possible rendering intents are <a data-link-type="biblio" href="#biblio-icc">[ICC]</a>:</p>
   <dl>
    <dt><dfn class="css" data-dfn-for="@color-profile/rendering-intent" data-dfn-type="value" data-export id="valdef-color-profile-rendering-intent-relative-colorimetric">relative-colorimetric<a class="self-link" href="#valdef-color-profile-rendering-intent-relative-colorimetric"></a></dfn> 
    <dd>
      Media-relative colorimetric is required to leave source colors that fall
			inside the destination medium gamut unchanged relative to the respective
			media white points. Source colors that are out of the destination medium
			gamut are mapped to colors on the gamut boundary using a variety of
			different methods. 
     <p class="note" role="note"><span>Note:</span> the media-relative colorimetric rendering intent is
			often used with black point compensation, where the source medium black point
			is mapped to the destination medium black point as well.
			This method must map the source white point to the destination white point. If
			black point compensation is in use, the source black point must also be
			mapped to the destination black point. Adaptation algorithms should be used
			to adjust for the change in white point. Relative relationships of colors
			inside both source and destination gamuts should be preserved. Relative
			relationships of colors outside the destination gamut may be changed.</p>
    <dt><dfn class="css" data-dfn-for="@color-profile/rendering-intent" data-dfn-type="value" data-export id="valdef-color-profile-rendering-intent-absolute-colorimetric">absolute-colorimetric<a class="self-link" href="#valdef-color-profile-rendering-intent-absolute-colorimetric"></a></dfn> 
    <dd>
      ICC-absolute colorimetric is required to leave source colors that fall
			inside the destination medium gamut unchanged relative to the adopted
			white (a perfect reflecting diffuser). Source colors that are out of the
			destination medium gamut are mapped to colors on the gamut boundary using a
			variety of different methods. This method produces the most accurate
			color matching of in-gamut colors, but will result in highlight clipping
			if the destination medium white point is lower than the source medium
			white point. For this reason it is recommended for use only in applications
			that need exact color matching and where highlight clipping is not a concern. 
     <p>This method MUST disable white point matching and black point matching when
			converting colors. In general, this option is not recommended except
			for testing purposes.</p>
    <dt><dfn class="css" data-dfn-for="@color-profile/rendering-intent" data-dfn-type="value" data-export id="valdef-color-profile-rendering-intent-perceptual">perceptual<a class="self-link" href="#valdef-color-profile-rendering-intent-perceptual"></a></dfn> 
    <dd>
      This method is often the preferred choice for images, especially when there are
			substantial differences between the source and destination (such as a screen display
			image reproduced on a reflection print). It takes the colors of the source image
			and re-optimizes the appearance for the destination medium using proprietary
			methods. This re-optimization may result in colors within both the source
			and destination gamuts being changed, although perceptual transforms are
			supposed to maintain the basic artistic intent of the original in the
			reproduction. They will not attempt to correct errors in the source image. 
     <p class="note" role="note"><span>Note:</span> With v2 ICC profiles there is no specified perceptual reference medium,
			which can cause interoperability problems. When v2 ICC profiles are used it may
			be safer to use the media-relative colorimetric rendering intent with black
			point compensation, instead of the perceptual rendering intent, unless the
			specific source and destination profiles to be used have been checked to ensure
			the combination produces the desired result.</p>
     <p>This method should maintain relative color values among the pixels as they
			are mapped to the target device gamut. This method may change pixel values
			that were originally within the target device gamut, in order to avoid
			hue shifts and discontinuities and to preserve as much as possible the
			overall appearance of the scene.</p>
    <dt><dfn class="css" data-dfn-for="@color-profile/rendering-intent" data-dfn-type="value" data-export id="valdef-color-profile-rendering-intent-saturation">saturation<a class="self-link" href="#valdef-color-profile-rendering-intent-saturation"></a></dfn> 
    <dd> This option was created to preserve the relative saturation (chroma) of the original,
			and to keep solid colors pure. However, it experienced interoperability problems like
			the perceptual intent, and as solid color preservation is not amenable to a reference
			medium solution using v4 profiles does not solve the problem. Use of this rendering intent
			is not recommended unless the specific source and destination profiles to be used have
			been checked to ensure the combination produces the desired result.
			This option should preserve the relative saturation (chroma) values of the original
			pixels. Out of gamut colors should be converted to colors that have the same saturation
			but fall just inside the gamut. 
   </dl>
   <h2 class="heading settled" data-level="11" id="working-color-space"><span class="secno">11. </span><span class="content"> Working Color Space</span><a class="self-link" href="#working-color-space"></a></h2>
   <p class="issue" id="issue-d41d8cd9①"><a class="self-link" href="#issue-d41d8cd9①"></a> <a href="https://github.com/w3c/csswg-drafts/issues/300">&lt;https://github.com/w3c/csswg-drafts/issues/300></a></p>
   <h2 class="heading settled" data-level="12" id="cmyk-colors"><span class="secno">12. </span><span class="content"> Device-dependent CMYK Colors: the <a class="css" data-link-type="maybe" href="#funcdef-device-cmyk" id="ref-for-funcdef-device-cmyk②">device-cmyk()</a> function</span><a class="self-link" href="#cmyk-colors"></a></h2>
   <p>While screens typically display colors directly with RGB pixels,
	printers often represent colors in different ways.
	In particular, one of the most common print-based ways of representing colors is with CMYK:
	a combination of cyan, magenta, yellow, and black which yields a particular color on that device.
	The <a class="css" data-link-type="maybe" href="#funcdef-device-cmyk" id="ref-for-funcdef-device-cmyk③">device-cmyk()</a> function allows authors to specify a color in this way:</p>
<pre class="prod"><dfn class="dfn-paneled" data-dfn-type="function" data-export id="funcdef-device-cmyk">device-cmyk()</dfn> = device-cmyk( <a class="production" data-link-type="type" href="#typedef-cmyk-component" id="ref-for-typedef-cmyk-component">&lt;cmyk-component></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num" id="ref-for-mult-num②">{4}</a> [ / <a class="production" data-link-type="type" href="#typedef-alpha-value" id="ref-for-typedef-alpha-value①⑤">&lt;alpha-value></a> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt①②">?</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-comma" id="ref-for-comb-comma⑥">,</a> <a class="production" data-link-type="type" href="#typedef-color" id="ref-for-typedef-color①③" title="Expands to: indigo | gold | firebrick | indianred | yellow | darkolivegreen | darkseagreen | slategrey | darkslategrey | mediumvioletred | mediumorchid | transparent | chartreuse | mediumslateblue | black | springgreen | crimson | lightsalmon | brown | turquoise | olivedrab | cyan | silver | skyblue | gray | darkturquoise | goldenrod | darkgreen | darkviolet | darkgray | lightpink | teal | darkmagenta | lightgoldenrodyellow | lavender | yellowgreen | thistle | violet | navy | dimgrey | orchid | blue | ghostwhite | honeydew | cornflowerblue | darkblue | darkkhaki | mediumpurple | cornsilk | red | bisque | slategray | darkcyan | khaki | wheat | deepskyblue | rebeccapurple | darkred | steelblue | aliceblue | lightslategrey | gainsboro | mediumturquoise | floralwhite | coral | purple | lightgrey | lightcyan | darksalmon | beige | azure | lightsteelblue | oldlace | greenyellow | royalblue | lightseagreen | mistyrose | sienna | lightcoral | orangered | navajowhite | lime | palegreen | burlywood | seashell | mediumspringgreen | fuchsia | papayawhip | blanchedalmond | peru | aquamarine | white | darkslategray | tomato | ivory | dodgerblue | currentcolor | lemonchiffon | chocolate | orange | forestgreen | darkgrey | olive | mintcream | antiquewhite | darkorange | cadetblue | moccasin | limegreen | saddlebrown | grey | darkslateblue | lightskyblue | deeppink | plum | aqua | darkgoldenrod | maroon | sandybrown | magenta | tan | rosybrown | pink | lightblue | palevioletred | mediumseagreen | slateblue | dimgray | powderblue | seagreen | snow | mediumblue | midnightblue | paleturquoise | palegoldenrod | whitesmoke | darkorchid | salmon | lightslategray | lawngreen | lightgreen | lightgray | hotpink | lightyellow | lavenderblush | linen | mediumaquamarine | green | blueviolet | peachpuff">&lt;color></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt①③">?</a> )
<dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-cmyk-component">&lt;cmyk-component></dfn> = <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value①⑤">&lt;number></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②⓪">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value①③">&lt;percentage></a>
</pre>
   <p>The arguments of the <a class="css" data-link-type="maybe" href="#funcdef-device-cmyk" id="ref-for-funcdef-device-cmyk④">device-cmyk()</a> function specify the cyan, magenta, yellow, and black components, in order,
	as a number between 0 and 1 or a percentage between 0% and 100%.
	These two usages are equivalent, and map to each other linearly.
	Values less than 0 or 0%, or greater than 1 or 100%,
	are not invalid;
	instead, they are clamped to 0/0% or 1/100% at computed-value time.</p>
   <p>The fifth argument specifies the alpha channel of the color.
	It’s interpreted identically to the fourth argument of the <a class="css" data-link-type="maybe" href="#funcdef-rgb" id="ref-for-funcdef-rgb①⑤">rgb()</a> function.
	If omitted, it defaults to <span class="css">100%</span>.</p>
   <p>The sixth argument specifies the fallback color,
	used when the user agent doesn’t know how to accurately transform the CMYK color to RGB.
	If omitted, it defaults to the CMYK color <a data-link-type="dfn" href="#naively-convert-from-cmyk-to-rgba" id="ref-for-naively-convert-from-cmyk-to-rgba">naively converted to RGBA</a>.</p>
   <p>Typically, print-based applications will actually store the used colors as CMYK,
	and send them to the printer in that form.
	Unfortunately, CSS cannot do that;
	various CSS features require an RGB color,
	so that compositing/blending/etc. can be done.
	As such, CMYK colors must be converted to an equivalent RGB color.
	This is not trivial, like the conversion from HSL or HWB to RGB;
	the precise conversion depends on the precise characteristics of the output device.</p>
   <p>If the user agent has information about the output device such that it believes it can accurately convert the CMYK color to a correct RGB color,
	the computed value of the <a class="css" data-link-type="maybe" href="#funcdef-device-cmyk" id="ref-for-funcdef-device-cmyk⑤">device-cmyk()</a> function must be that RGBA color.
	Otherwise, the computed value must be the fallback color.</p>
   <div class="example" id="example-94476503">
    <a class="self-link" href="#example-94476503"></a> For example, the following colors are equivalent
		(under the default conversion listed above): 
<pre class="lang-css highlight">color: device-cmyk(0 81% 81% 30%);
color: rgb(178 34 34);
color: firebrick;
</pre>
    <p class="note" role="note"><span>Note:</span> these colors might not match precisely
		if the browser knows a more precise conversion between CMYK and RGB colors.
		It’s recommended that if authors use <strong>any</strong> CMYK colors in their document,
		that they use <strong>only</strong> CMYK colors in their document
		to avoid any color-matching difficulties.</p>
   </div>
   <h3 class="heading settled" data-level="12.1" id="cmyk-rgb"><span class="secno">12.1. </span><span class="content"> Converting Between Uncalibrated CMYK and RGB-Based Colors</span><a class="self-link" href="#cmyk-rgb"></a></h3>
   <p>While most colors defined in this specification are directly compatible with RGBA,
	and thus can be mechanically and consistently converted back and forth with it,
	device-CMYK colors are not  directly compatible;
	a given device-CMYK color
	will map to various RGBA colors
	depending on the physical characteristics of the output device.</p>
   <p>Ideally, the user agent will be aware of the output device’s color profiles for RGBA and device-CMYK.
	If this is true,
	then the user agent must convert between device-CMYK and RGBA colors (and vice versa)
	by first converting the color into an appropriate device-independent color space,
	such as CIELab,
	and then converting into the output color space,
	using the appropriate color profiles for each operation.</p>
   <p>This is not always possible, however.
	In that case, the user agent must use the following naive conversion algorithms.</p>
   <p>To <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="naively convert from CMYK to RGBA | naively converted to RGBA" data-noexport id="naively-convert-from-cmyk-to-rgba">naively convert from CMYK to RGBA</dfn>:</p>
   <p>If a fallback color was specified,
	return that color
	(converting it to RGB as well, if necessary).
	Otherwise:</p>
   <ul class="lang-javascript">
    <li><code class="highlight">red <c- o>=</c-> <c- mi>1</c-> <c- o>-</c-> min<c- p>(</c-><c- mi>1</c-><c- p>,</c-> cyan <c- o>*</c-> <c- p>(</c-><c- mi>1</c-> <c- o>-</c-> black<c- p>)</c-> <c- o>+</c-> black<c- p>)</c-></code> 
    <li><code class="highlight">green <c- o>=</c-> <c- mi>1</c-> <c- o>-</c-> min<c- p>(</c-><c- mi>1</c-><c- p>,</c-> magenta <c- o>*</c-> <c- p>(</c-><c- mi>1</c-> <c- o>-</c-> black<c- p>)</c-> <c- o>+</c-> black<c- p>)</c-></code> 
    <li><code class="highlight">blue <c- o>=</c-> <c- mi>1</c-> <c- o>-</c-> min<c- p>(</c-><c- mi>1</c-><c- p>,</c-> yellow <c- o>*</c-> <c- p>(</c-><c- mi>1</c-> <c- o>-</c-> black<c- p>)</c-> <c- o>+</c-> black<c- p>)</c-></code> 
    <li>Alpha is same as for input color. 
   </ul>
   <p>To <dfn data-dfn-type="dfn" data-lt="naively convert from RGBA to CMYK | naively converted to CMYK" data-noexport id="naively-convert-from-rgba-to-cmyk">naively convert from RGBA to CMYK<a class="self-link" href="#naively-convert-from-rgba-to-cmyk"></a></dfn>:</p>
   <ul class="lang-javascript">
    <li><code class="highlight">black <c- o>=</c-> <c- mi>1</c-> <c- o>-</c-> max<c- p>(</c->red<c- p>,</c-> green<c- p>,</c-> blue<c- p>)</c-></code> 
    <li><code class="highlight">cyan <c- o>=</c-> <c- p>(</c-><c- mi>1</c-> <c- o>-</c-> red <c- o>-</c-> black<c- p>)</c-> <c- o>/</c-> <c- p>(</c-><c- mi>1</c-> <c- o>-</c-> black<c- p>),</c-> or <c- mi>0</c-> <c- k>if</c-> black is <c- mi>1</c-></code> 
    <li><code class="highlight">magenta <c- o>=</c-> <c- p>(</c-><c- mi>1</c-> <c- o>-</c-> green <c- o>-</c-> black<c- p>)</c-> <c- o>/</c-> <c- p>(</c-><c- mi>1</c-> <c- o>-</c-> black<c- p>),</c-> or <c- mi>0</c-> <c- k>if</c-> black is <c- mi>1</c-></code> 
    <li><code class="highlight">yellow <c- o>=</c-> <c- p>(</c-><c- mi>1</c-> <c- o>-</c-> blue <c- o>-</c-> black<c- p>)</c-> <c- o>/</c-> <c- p>(</c-><c- mi>1</c-> <c- o>-</c-> black<c- p>),</c-> or <c- mi>0</c-> <c- k>if</c-> black is <c- mi>1</c-></code> 
    <li>alpha is the same as the input color 
    <li>fallback color must be set to the input color 
   </ul>
   <h2 class="heading settled" data-level="13" id="transparency"><span class="secno">13. </span><span class="content"> Transparency: the <a class="property" data-link-type="propdesc" href="#propdef-opacity" id="ref-for-propdef-opacity">opacity</a> property</span><a class="self-link" href="#transparency"></a></h2>
   <p>Opacity can be thought of as a postprocessing operation.
	Conceptually, after the element (including its descendants) is rendered into an RGBA offscreen image,
	the opacity setting specifies how to blend the offscreen rendering into
	the current composite rendering.
	See <a href="#alpha">simple alpha compositing</a> for details.</p>
   <table class="def propdef" data-link-for-hint="opacity">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-opacity">opacity</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production css" data-link-type="type" href="#typedef-alpha-value" id="ref-for-typedef-alpha-value①⑥">&lt;alpha-value></a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>1 
     <tr>
      <th>Applies to:
      <td><a href="https://drafts.csswg.org/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>map to the range [0,1] 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>specified number, clamped to the range [0,1] 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>by computed value type 
   </table>
   <dl>
    <dt><a class="production css" data-link-type="type" href="#typedef-alpha-value" id="ref-for-typedef-alpha-value①⑦">&lt;alpha-value></a> 
    <dd> The opacity to be applied to the element.
			It is interpreted identically to its definition in <a class="css" data-link-type="maybe" href="#funcdef-rgb" id="ref-for-funcdef-rgb①⑥">rgb()</a>,
			except that the resulting opacity is applied to the entire element,
			rather than a particular color. 
   </dl>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-opacity" id="ref-for-propdef-opacity①">opacity</a> property applies the specified opacity to the element <em>as a whole</em>,
	including its contents,
	rather than applying it to each descendant individually.
	This means that, for example,
	an opaque child occluding part of the element’s background will continue to do so even when <span class="property" id="ref-for-propdef-opacity②">opacity</span> is less than 1,
	but the element and child as a whole will show the underlying page through themselves.</p>
   <p>If a box has <a class="property" data-link-type="propdesc" href="#propdef-opacity" id="ref-for-propdef-opacity③">opacity</a> less than 1,
	it forms a <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#stacking-context" id="ref-for-stacking-context">stacking context</a> for its children.
	(This prevents its contents from interleaving in the z-axis
	with content outside it.)</p>
   <p>Furthermore, if the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-z-index" id="ref-for-propdef-z-index">z-index</a> property applies to the box,
	the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-position-3/#valdef-z-index-auto" id="ref-for-valdef-z-index-auto">auto</a> value is treated as <span class="css">0</span> for the element;
	it is otherwise painted on the same layer within its parent stacking context
	as positioned elements with stack level 0
	(as if it were a positioned element with <span class="css">z-index:0</span>).</p>
   <p>See <a href="https://www.w3.org/TR/CSS21/visuren.html#layers">section 9.9</a> and <a href="https://www.w3.org/TR/CSS21/zindex.html">Appendix E</a> of <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a> for more information on stacking contexts.</p>
   <p>These rules about z-order do not apply to SVG elements,
	since SVG has its own <a href="https://www.w3.org/TR/SVG11/render.html">rendering model</a> (<a data-link-type="biblio" href="#biblio-svg11">[SVG11]</a>, Chapter 3).</p>
   <h3 class="heading settled" data-level="13.1" id="alpha"><span class="secno">13.1. </span><span class="content"> Simple alpha compositing</span><a class="self-link" href="#alpha"></a></h3>
   <p>When drawing, implementations must handle alpha
	according to the rules in <a href="https://www.w3.org/TR/compositing-1/#simplealphacompositing">Section 5.1 Simple alpha compositing</a> of <a data-link-type="biblio" href="#biblio-compositing">[Compositing]</a>.</p>
   <h2 class="heading settled" data-level="14" id="sample"><span class="secno">14. </span><span class="content"> Default Style Rules</span><a class="self-link" href="#sample"></a></h2>
   <p>The following stylesheet is informative, not normative.  This style sheet could be used by an implementation as part of its default styling of HTML4, XHTML1, XHTML1.1, XHTML Basic, and other XHTML Family documents.</p>
<pre class="lang-css highlight"><c- f>html </c-><c- p>{</c->
  <c- k>color</c-><c- p>:</c-> black<c- p>;</c->
<c- p>}</c->

<c- c>/* traditional desktop user agent colors for hyperlinks */</c->
<c- f>:link    </c-><c- p>{</c-> <c- k>color</c-><c- p>:</c-> blue<c- p>;</c-> <c- p>}</c->
<c- f>:visited </c-><c- p>{</c-> <c- k>color</c-><c- p>:</c-> purple<c- p>;</c-> <c- p>}</c->
</pre>
   <p>The default background of the root element must be <a class="css" data-link-type="maybe" href="#valdef-color-transparent" id="ref-for-valdef-color-transparent④">transparent</a>.
	The default color of the canvas (the surface on which the document is painted)
	is UA-dependent,
	but is recommended to be <a class="css" data-link-type="maybe" href="#valdef-color-white" id="ref-for-valdef-color-white">white</a>,
	especially if the above <a class="property" data-link-type="propdesc" href="#propdef-color" id="ref-for-propdef-color⑦">color</a> rules are used.</p>
   <h2 class="heading settled" data-level="15" id="color-conversion-code"><span class="secno">15. </span><span class="content">Sample code for color conversions</span><a class="self-link" href="#color-conversion-code"></a></h2>
   <p><em>This section is not normative.</em></p>
   <p>For clarity, a library is used for matrix multiplication.</p>
   <h2 class="no-num heading settled" id="deprecated-system-colors"><span class="content"> Appendix A: Deprecated CSS System Colors</span><a class="self-link" href="#deprecated-system-colors"></a></h2>
   <p>Earlier versions of CSS defined several additional <a data-link-type="dfn" href="#css-system-colors" id="ref-for-css-system-colors①">system colors</a>.
	These color keywords have been <strong>deprecated</strong>, however,
	as they are insufficient for their original purpose
	(making website elements look like their native OS counterparts),
	represent a security risk
	by making it easier for a webpage to “spoof” a native OS dialog,
	and increase fingerprinting surface, compromising user privacy.</p>
   <p>User agents must support these keywords,
	but are encouraged to map them to default values
	not based on the user’s OS settings
	or match them to appropriate (undeprecated) <a data-link-type="dfn" href="#css-system-colors" id="ref-for-css-system-colors②">system colors</a>. <strong>Authors must not use these keywords.</strong></p>
   <p>The deprecated system colors are represented
	as the <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-deprecated-colors"><a class="production css" data-link-type="type" href="#typedef-deprecated-colors" id="ref-for-typedef-deprecated-colors">&lt;deprecated-colors></a></dfn> sub-type,
	and are defined as:</p>
   <dl>
    <dt><dfn data-dfn-type="dfn" data-noexport id="activeborder">ActiveBorder<a class="self-link" href="#activeborder"></a></dfn> 
    <dd>Active window border. 
    <dt><dfn data-dfn-type="dfn" data-noexport id="activecaption">ActiveCaption<a class="self-link" href="#activecaption"></a></dfn> 
    <dd>Active window caption. 
    <dt><dfn data-dfn-type="dfn" data-noexport id="appworkspace">AppWorkspace<a class="self-link" href="#appworkspace"></a></dfn> 
    <dd>Background color of multiple document interface. 
    <dt><dfn data-dfn-type="dfn" data-noexport id="background">Background<a class="self-link" href="#background"></a></dfn> 
    <dd>Desktop background. 
    <dt><dfn data-dfn-type="dfn" data-noexport id="buttonhighlight">ButtonHighlight<a class="self-link" href="#buttonhighlight"></a></dfn> 
    <dd>The color of the border facing the light source for 3-D elements
		that appear 3-D due to one layer of surrounding border. 
    <dt><dfn data-dfn-type="dfn" data-noexport id="buttonshadow">ButtonShadow<a class="self-link" href="#buttonshadow"></a></dfn> 
    <dd>The color of the border away from the light source for 3-D elements
		that appear 3-D due to one layer of surrounding border. 
    <dt><dfn data-dfn-type="dfn" data-noexport id="captiontext">CaptionText<a class="self-link" href="#captiontext"></a></dfn> 
    <dd>Text in caption, size box, and scrollbar arrow box. 
    <dt><dfn data-dfn-type="dfn" data-noexport id="inactiveborder">InactiveBorder<a class="self-link" href="#inactiveborder"></a></dfn> 
    <dd>Inactive window border. 
    <dt><dfn data-dfn-type="dfn" data-noexport id="inactivecaption">InactiveCaption<a class="self-link" href="#inactivecaption"></a></dfn> 
    <dd>Inactive window caption. 
    <dt><dfn data-dfn-type="dfn" data-noexport id="inactivecaptiontext">InactiveCaptionText<a class="self-link" href="#inactivecaptiontext"></a></dfn> 
    <dd>Color of text in an inactive caption. 
    <dt><dfn data-dfn-type="dfn" data-noexport id="infobackground">InfoBackground<a class="self-link" href="#infobackground"></a></dfn> 
    <dd>Background color for tooltip controls. 
    <dt><dfn data-dfn-type="dfn" data-noexport id="infotext">InfoText<a class="self-link" href="#infotext"></a></dfn> 
    <dd>Text color for tooltip controls. 
    <dt><dfn data-dfn-type="dfn" data-noexport id="menu">Menu<a class="self-link" href="#menu"></a></dfn> 
    <dd>Menu background. 
    <dt><dfn data-dfn-type="dfn" data-noexport id="menutext">MenuText<a class="self-link" href="#menutext"></a></dfn> 
    <dd>Text in menus. 
    <dt><dfn data-dfn-type="dfn" data-noexport id="scrollbar">Scrollbar<a class="self-link" href="#scrollbar"></a></dfn> 
    <dd>Scroll bar gray area. 
    <dt><dfn data-dfn-type="dfn" data-noexport id="threeddarkshadow">ThreeDDarkShadow<a class="self-link" href="#threeddarkshadow"></a></dfn> 
    <dd>The color of the darker (generally outer) of the two borders away
		from the light source for 3-D elements that appear 3-D due to two
		concentric layers of surrounding border. 
    <dt><dfn data-dfn-type="dfn" data-noexport id="threedface">ThreeDFace<a class="self-link" href="#threedface"></a></dfn> 
    <dd>The face background color for 3-D elements that appear 3-D due to
		two concentric layers of surrounding border. 
    <dt><dfn data-dfn-type="dfn" data-noexport id="threedhighlight">ThreeDHighlight<a class="self-link" href="#threedhighlight"></a></dfn> 
    <dd>The color of the lighter (generally outer) of the two borders facing
		the light source for 3-D elements that appear 3-D due to two
		concentric layers of surrounding border. 
    <dt><dfn data-dfn-type="dfn" data-noexport id="threedlightshadow">ThreeDLightShadow<a class="self-link" href="#threedlightshadow"></a></dfn> 
    <dd>The color of the darker (generally inner) of the two borders facing
		the light source for 3-D elements that appear 3-D due to two
		concentric layers of surrounding border. 
    <dt><dfn data-dfn-type="dfn" data-noexport id="threedshadow">ThreeDShadow<a class="self-link" href="#threedshadow"></a></dfn> 
    <dd>The color of the lighter (generally inner) of the two borders away
		from the light source for 3-D elements that appear 3-D due to two
		concentric layers of surrounding border. 
    <dt><dfn data-dfn-type="dfn" data-noexport id="window">Window<a class="self-link" href="#window"></a></dfn> 
    <dd>Window background. 
    <dt><dfn data-dfn-type="dfn" data-noexport id="windowframe">WindowFrame<a class="self-link" href="#windowframe"></a></dfn> 
    <dd>Window frame. 
    <dt><dfn data-dfn-type="dfn" data-noexport id="windowtext">WindowText<a class="self-link" href="#windowtext"></a></dfn> 
    <dd>Text in windows. 
   </dl>
   <h2 class="no-num no-ref heading settled" id="acknowledgments"><span class="content"> Acknowledgments</span><a class="self-link" href="#acknowledgments"></a></h2>
   <p>Thanks to Brad Pettit both for writing up color-profiles, and for implementing it.
Thanks to Steven Pemberton for his write-up on HSL colors.
Thanks to Melanie Richards for updating the system colors write-up.
Thanks especially to the feedback from Marc Attinasi, Bert Bos, Joe Clark, fantasai, Patrick Garies, Tony Graham, Ian Hickson, Susan Lesch, Alex LeDonne, Cameron McCormack, Krzysztof Maczyński, Chris Moschini, Chris Murphy, Christoph Päper, David Perrell, Jacob Refstrup, Dave Singer, Jonathan Stanley, Andrew Thompson, Russ Weakley, Etan Wexler, David Woolley, Boris Zbarsky, Steve Zilles, the XSL FO subgroup of the XSL working group, and all the rest of the <a href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> community.</p>
   <p>And thanks to Chris Lilley for being the resident CSS Color expert.</p>
   <h2 class="no-num heading settled" id="changes"><span class="content"> Changes</span><a class="self-link" href="#changes"></a></h2>
   <h3 class="no-num heading settled" id="changes-from-20191105"><span class="content">Changes since <a href="https://www.w3.org/TR/2019/WD-css-color-4-20191105/">Working Draft of
5 November 2019</a></span><a class="self-link" href="#changes-from-20191105"></a></h3>
   <ul>
    <li>Removed confusing gray() function per CSS WG resolution
    <li>Collect scattered definitions into new <a href="#terminology">Color terminology</a> section
    <li>Minor editorial clarifications, bikeshed markup fixes
   </ul>
   <h3 class="no-num heading settled" id="changes-from-20160705"><span class="content">Changes since <a href="http://www.w3.org/TR/2016/WD-css-color-4-20160705/">Working Draft of 05 July 2016</a></span><a class="self-link" href="#changes-from-20160705"></a></h3>
   <ul>
    <li>Changed Lightness in Lab and LCH to be a percentage, for CSS compatibility
    <li>Clamping of color values clarified
    <li>Percentage opacity is now allowed
    <li>Define terms sRGB and linear-light sRGB, for use by other specs
    <li>Add new list of CSS system colors; renaming Text to CanvasText
    <li>Make system color keywords compute to themselves
    <li>Add computed/used entry for system colors
    <li>Rewrite intro to non-deprecated system colors to center their use around forced-colors mode rather than generic use
    <li>Consistent hyphenation of predefined colorspaces
    <li>Restore text about non-opaque elements painting at layeres even when not positioned
    <li>Initial value of the "color" property is now black
    <li>Clarify hue in LCH is modulo 360deg
    <li>Clarify allowed range of L in LCH and Lab, and meaning of L=100
    <li>Update references for colorspaces used in video
    <li>Add prophoto-rgb predefined colorspace
    <li>Correct black and white luminance levels for display-p3
    <li>Clarify display-p3 transfer function
    <li>Add a98-rgb colorspace, correct table of primary chromaticities
    <li>Clarify that currentColor’s computed value is not the resolved color
    <li>Update syntax is examples to conform to latest specification
    <li>Remove the color-mod() function
    <li>Drop the "media" from propdef tables
    <li>Export, and consistently use, "transparent black" and "opaque black"
    <li>Clarify calculated values such as percents
    <li>Clarify required precision and rounding behavior for color channels
    <li>Clarify "color" property has no effect on color font glyphs (unless specifically referenced, e.g. with currentColor)
    <li>Clarify how color values are resolved
    <li>larify that HSL, HWB and named colors resolve to sRGB
    <li>Simplify conversion from device-cmyk to sRGB
    <li>Describe previous, comma-using color syntaxes as "legacy"; change examples to commaless form
    <li>Remove superfluous requirement that displayed colors be restricted to device gamut (like there was any other option!)
    <li>Rename P3 to display-p3; avoid claiming this is DCI P3, as these are not the same
    <li>Improved description of the parameters to the "color()" function
    <li>Disallow predefined spaces from "@color-profile" identifier
    <li>Add canonical order to "color", "color-adjust" and "opacity" property definitions
    <li>Switch definition of alpha compositing from SVG11 to CSS Compositing
    <li>Clarify sample conversion code is non-normative
    <li>Add Security and Privacy Considerations
    <li>Update several references to most current versions
    <li>Convert inline issues to links to GitHub issues
    <li>Minor editorial clarifications, formatting and markup improvements
   </ul>
   <h3 class="heading settled" id="changes-from-3"><span class="content"> Changes from Colors 3</span><a class="self-link" href="#changes-from-3"></a></h3>
   <ol>
    <li><a class="css" data-link-type="maybe" href="#funcdef-rgb" id="ref-for-funcdef-rgb①⑦">rgb()</a> and <a class="css" data-link-type="maybe" href="#funcdef-rgba" id="ref-for-funcdef-rgba④">rgba()</a> functions now accept <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value①⑥">&lt;number></a> rather than <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#integer-value" id="ref-for-integer-value">&lt;integer></a>. 
    <li><a class="css" data-link-type="maybe" href="#funcdef-hsl" id="ref-for-funcdef-hsl①⓪">hsl()</a> and <a class="css" data-link-type="maybe" href="#funcdef-hsla" id="ref-for-funcdef-hsla④">hsla()</a> functions now accept <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#angle-value" id="ref-for-angle-value①" title="Expands to: turn | rad | grad | deg">&lt;angle></a> as well as <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value①⑦">&lt;number></a> for hues. 
    <li><a class="css" data-link-type="maybe" href="#funcdef-rgb" id="ref-for-funcdef-rgb①⑧">rgb()</a> and <a class="css" data-link-type="maybe" href="#funcdef-rgba" id="ref-for-funcdef-rgba⑤">rgba()</a>, and <a class="css" data-link-type="maybe" href="#funcdef-hsl" id="ref-for-funcdef-hsl①①">hsl()</a> and <a class="css" data-link-type="maybe" href="#funcdef-hsla" id="ref-for-funcdef-hsla⑤">hsla()</a> are now aliases of each other
			(all of them have an optional alpha). 
    <li><a class="css" data-link-type="maybe" href="#funcdef-rgb" id="ref-for-funcdef-rgb①⑨">rgb()</a>, <a class="css" data-link-type="maybe" href="#funcdef-rgba" id="ref-for-funcdef-rgba⑥">rgba()</a>, <a class="css" data-link-type="maybe" href="#funcdef-hsl" id="ref-for-funcdef-hsl①②">hsl()</a>, and <a class="css" data-link-type="maybe" href="#funcdef-hsla" id="ref-for-funcdef-hsla⑥">hsla()</a> have all gained a new syntax
			consisting of space-separated arguments
			and an optional slash-separated opacity.
			All the color functions use this syntax form now,
			in keeping with <a href="https://wiki.csswg.org/ideas/functional-notation#general-principles">CSS’s functional-notation design principles</a>. 
    <li>All uses of <a class="production css" data-link-type="type" href="#typedef-alpha-value" id="ref-for-typedef-alpha-value①⑧">&lt;alpha-value></a> now accept <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value①④">&lt;percentage></a> as well as <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value①⑧">&lt;number></a>. 
    <li>4 and 8-digit hex colors have been added, to specify transparency. 
   </ol>
   <p>Several brand new features have been added:</p>
   <ol>
    <li><a class="css" data-link-type="maybe" href="#funcdef-hwb" id="ref-for-funcdef-hwb⑤">hwb()</a> function, for specifying colors in the HWB notation. 
    <li>predefined, wide color gamut RGB colorspaces
    <li><a class="css" data-link-type="maybe" href="#funcdef-lab" id="ref-for-funcdef-lab④">lab()</a> and <a class="css" data-link-type="maybe" href="#funcdef-lch" id="ref-for-funcdef-lch④">lch()</a> functions, for device-independent color 
    <li><a class="css" data-link-type="maybe" href="#funcdef-color" id="ref-for-funcdef-color⑧">color()</a> function and <a class="css" data-link-type="maybe" href="#at-ruledef-profile" id="ref-for-at-ruledef-profile⑦">@color-profile</a> at-rule, for profiled device-dependent color, including calibrated CMYK. 
    <li><a class="css" data-link-type="maybe" href="#funcdef-device-cmyk" id="ref-for-funcdef-device-cmyk⑥">device-cmyk()</a> function, for specifying uncalibrated colors in an output-device-specific CMYK colorspace. 
    <li>Addition of named color <a class="css" data-link-type="maybe" href="#valdef-color-rebeccapurple" id="ref-for-valdef-color-rebeccapurple">rebeccapurple</a>. 
   </ol>
   <h2 class="heading settled" data-level="16" id="priv-sec"><span class="secno">16. </span><span class="content">Security and Privacy Considerations</span><a class="self-link" href="#priv-sec"></a></h2>
   <p>This specification defines "system" colors,
which theoretically can expose details of the user’s OS settings,
which is a fingerprinting risk.</p>
   <p>The system colors,
if they actually correspond to the user’s system colors,
also pose a security risk,
as they make it easier for a malware site
to create user interfaces that appear to be from the system.
However, as several system colors are now defined to be "generic",
this risk is believed to be mitigated.</p>
  </main>
  <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
  <h3 class="heading settled" id="document-conventions"><span class="content"> Document conventions</span><a class="self-link" href="#document-conventions"></a></h3>
  <p>Conformance requirements are expressed with a combination of
	descriptive assertions and RFC 2119 terminology. The key words “MUST”,
	“MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
	“RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
	document are to be interpreted as described in RFC 2119.
	However, for readability, these words do not appear in all uppercase
	letters in this specification. </p>
  <p>All of the text of this specification is normative except sections
	explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a> </p>
  <p>Examples in this specification are introduced with the words “for example”
	or are set apart from the normative text with <code>class="example"</code>,
	like this: </p>
  <div class="example" id="example-ae2b6bc0">
   <a class="self-link" href="#example-ae2b6bc0"></a> 
   <p>This is an example of an informative example. </p>
  </div>
  <p>Informative notes begin with the word “Note” and are set apart from the
	normative text with <code>class="note"</code>, like this: </p>
  <p class="note" role="note">Note, this is an informative note. </p>
  <p>Advisements are normative sections styled to evoke special attention and are
	set apart from other normative text with <code>&lt;strong class="advisement"></code>, like
	this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong> </p>
  <h3 class="heading settled" id="conform-classes"><span class="content"> Conformance classes</span><a class="self-link" href="#conform-classes"></a></h3>
  <p>Conformance to this specification
	is defined for three conformance classes: </p>
  <dl>
   <dt>style sheet 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#style-sheet">CSS
			style sheet</a>. 
   <dt>renderer 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders
			documents that use them. 
   <dt>authoring tool 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that writes a style sheet. 
  </dl>
  <p>A style sheet is conformant to this specification
	if all of its statements that use syntax defined in this module are valid
	according to the generic CSS grammar and the individual grammars of each
	feature defined in this module. </p>
  <p>A renderer is conformant to this specification
	if, in addition to interpreting the style sheet as defined by the
	appropriate specifications, it supports all the features defined
	by this specification by parsing them correctly
	and rendering the document accordingly. However, the inability of a
	UA to correctly render a document due to limitations of the device
	does not make the UA non-conformant. (For example, a UA is not
	required to render color on a monochrome monitor.) </p>
  <p>An authoring tool is conformant to this specification
	if it writes style sheets that are syntactically correct according to the
	generic CSS grammar and the individual grammars of each feature in
	this module, and meet all other conformance requirements of style sheets
	as described in this module. </p>
  <h3 class="heading settled" id="conform-responsible"><span class="content"> Requirements for Responsible Implementation of CSS</span><a class="self-link" href="#conform-responsible"></a></h3>
  <p>The following sections define several conformance requirements
		for implementing CSS responsibly,
		in a way that promotes interoperability in the present and future. </p>
  <h4 class="heading settled" id="conform-partial"><span class="content"> Partial Implementations</span><a class="self-link" href="#conform-partial"></a></h4>
  <p>So that authors can exploit the forward-compatible parsing rules to assign fallback values, <strong>CSS renderers <em>must</em> treat as invalid
		(and <a href="http://www.w3.org/TR/CSS2/conform.html#ignore">ignore as appropriate</a>)
		any at-rules, properties, property values, keywords, and other syntactic constructs
		for which they have no usable level of support</strong>.
		In particular, user agents <em>must not</em> selectively ignore
		unsupported property values and honor supported values in a single multi-value property declaration:
		if any value is considered invalid (as unsupported values must be),
		CSS requires that the entire declaration be ignored. </p>
  <h4 class="heading settled" id="conform-future-proofing"><span class="content"> Implementations of Unstable and Proprietary Features</span><a class="self-link" href="#conform-future-proofing"></a></h4>
  <p>To avoid clashes with future stable CSS features,
		the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. </p>
  <h4 class="heading settled" id="conform-testing"><span class="content"> Implementations of CR-level Features</span><a class="self-link" href="#conform-testing"></a></h4>
  <p>Once a specification reaches the Candidate Recommendation stage,
		implementers should release an <a data-link-type="dfn" href="http://www.w3.org/TR/CSS/#vendor-prefix">unprefixed</a> implementation
		of any CR-level feature they can demonstrate
		to be correctly implemented according to spec,
		and should avoid exposing a prefixed variant of that feature. </p>
  <p>To establish and maintain the interoperability of CSS across
		implementations, the CSS Working Group requests that non-experimental
		CSS renderers submit an implementation report (and, if necessary, the
		testcases used for that implementation report) to the W3C before
		releasing an unprefixed implementation of any CSS features. Testcases
		submitted to W3C are subject to review and correction by the CSS
		Working Group. </p>
  <p>
   Further information on submitting testcases and implementation reports
		can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
		Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. 
<script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script>
  </p>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#valdef-color-a98-rgb">a98-rgb</a><span>, in §10.2</span>
   <li><a href="#valdef-color-profile-rendering-intent-absolute-colorimetric">absolute-colorimetric</a><span>, in §10.3</span>
   <li><a href="#activeborder">ActiveBorder</a><span>, in §Unnumbered section</span>
   <li><a href="#activecaption">ActiveCaption</a><span>, in §Unnumbered section</span>
   <li><a href="#valdef-system-color-activetext">ActiveText</a><span>, in §6.2</span>
   <li><a href="#valdef-color-aliceblue">aliceblue</a><span>, in §6.1</span>
   <li><a href="#alpha-channel">alpha channel</a><span>, in §4</span>
   <li><a href="#alpha-channel">alpha component</a><span>, in §4</span>
   <li><a href="#typedef-alpha-value">&lt;alpha-value></a><span>, in §5.1</span>
   <li><a href="#valdef-color-antiquewhite">antiquewhite</a><span>, in §6.1</span>
   <li><a href="#appworkspace">AppWorkspace</a><span>, in §Unnumbered section</span>
   <li><a href="#valdef-color-aqua">aqua</a><span>, in §6.1</span>
   <li><a href="#valdef-color-aquamarine">aquamarine</a><span>, in §6.1</span>
   <li><a href="#valdef-color-azure">azure</a><span>, in §6.1</span>
   <li><a href="#background">Background</a><span>, in §Unnumbered section</span>
   <li><a href="#valdef-color-beige">beige</a><span>, in §6.1</span>
   <li><a href="#valdef-color-bisque">bisque</a><span>, in §6.1</span>
   <li><a href="#valdef-color-black">black</a><span>, in §6.1</span>
   <li><a href="#valdef-color-blanchedalmond">blanchedalmond</a><span>, in §6.1</span>
   <li><a href="#valdef-color-blue">blue</a><span>, in §6.1</span>
   <li><a href="#valdef-color-blueviolet">blueviolet</a><span>, in §6.1</span>
   <li><a href="#valdef-color-brown">brown</a><span>, in §6.1</span>
   <li><a href="#valdef-color-burlywood">burlywood</a><span>, in §6.1</span>
   <li><a href="#valdef-system-color-buttonface">ButtonFace</a><span>, in §6.2</span>
   <li><a href="#buttonhighlight">ButtonHighlight</a><span>, in §Unnumbered section</span>
   <li><a href="#buttonshadow">ButtonShadow</a><span>, in §Unnumbered section</span>
   <li><a href="#valdef-system-color-buttontext">ButtonText</a><span>, in §6.2</span>
   <li><a href="#valdef-color-cadetblue">cadetblue</a><span>, in §6.1</span>
   <li><a href="#calibrated">calibrated</a><span>, in §2</span>
   <li><a href="#valdef-system-color-canvas">Canvas</a><span>, in §6.2</span>
   <li><a href="#valdef-system-color-canvastext">CanvasText</a><span>, in §6.2</span>
   <li><a href="#captiontext">CaptionText</a><span>, in §Unnumbered section</span>
   <li><a href="#characterised">characterised</a><span>, in §2</span>
   <li><a href="#valdef-color-chartreuse">chartreuse</a><span>, in §6.1</span>
   <li><a href="#valdef-color-chocolate">chocolate</a><span>, in §6.1</span>
   <li><a href="#chromatic-adaptation-transform">chromatic adaptation transform</a><span>, in §9</span>
   <li><a href="#typedef-cmyk-component">&lt;cmyk-component></a><span>, in §12</span>
   <li><a href="#funcdef-color">color()</a><span>, in §10.1</span>
   <li><a href="#typedef-color">&lt;color></a><span>, in §4</span>
   <li>
    color
    <ul>
     <li><a href="#propdef-color">(property)</a><span>, in §3</span>
     <li><a href="#color">definition of</a><span>, in §2</span>
    </ul>
   <li><a href="#at-ruledef-profile">@color-profile</a><span>, in §10.3</span>
   <li><a href="#css-color-profile">color profile</a><span>, in §10.3</span>
   <li><a href="#colorspace">colorspace</a><span>, in §2</span>
   <li><a href="#computed-color">computed color</a><span>, in §4.3</span>
   <li><a href="#valdef-color-coral">coral</a><span>, in §6.1</span>
   <li><a href="#valdef-color-cornflowerblue">cornflowerblue</a><span>, in §6.1</span>
   <li><a href="#valdef-color-cornsilk">cornsilk</a><span>, in §6.1</span>
   <li><a href="#valdef-color-crimson">crimson</a><span>, in §6.1</span>
   <li><a href="#css-color-profile">CSS color profile</a><span>, in §10.3</span>
   <li><a href="#valdef-color-currentcolor">currentcolor</a><span>, in §6.4</span>
   <li><a href="#valdef-color-cyan">cyan</a><span>, in §6.1</span>
   <li><a href="#valdef-color-darkblue">darkblue</a><span>, in §6.1</span>
   <li><a href="#valdef-color-darkcyan">darkcyan</a><span>, in §6.1</span>
   <li><a href="#valdef-color-darkgoldenrod">darkgoldenrod</a><span>, in §6.1</span>
   <li><a href="#valdef-color-darkgray">darkgray</a><span>, in §6.1</span>
   <li><a href="#valdef-color-darkgreen">darkgreen</a><span>, in §6.1</span>
   <li><a href="#valdef-color-darkgrey">darkgrey</a><span>, in §6.1</span>
   <li><a href="#valdef-color-darkkhaki">darkkhaki</a><span>, in §6.1</span>
   <li><a href="#valdef-color-darkmagenta">darkmagenta</a><span>, in §6.1</span>
   <li><a href="#valdef-color-darkolivegreen">darkolivegreen</a><span>, in §6.1</span>
   <li><a href="#valdef-color-darkorange">darkorange</a><span>, in §6.1</span>
   <li><a href="#valdef-color-darkorchid">darkorchid</a><span>, in §6.1</span>
   <li><a href="#valdef-color-darkred">darkred</a><span>, in §6.1</span>
   <li><a href="#valdef-color-darksalmon">darksalmon</a><span>, in §6.1</span>
   <li><a href="#valdef-color-darkseagreen">darkseagreen</a><span>, in §6.1</span>
   <li><a href="#valdef-color-darkslateblue">darkslateblue</a><span>, in §6.1</span>
   <li><a href="#valdef-color-darkslategray">darkslategray</a><span>, in §6.1</span>
   <li><a href="#valdef-color-darkslategrey">darkslategrey</a><span>, in §6.1</span>
   <li><a href="#valdef-color-darkturquoise">darkturquoise</a><span>, in §6.1</span>
   <li><a href="#valdef-color-darkviolet">darkviolet</a><span>, in §6.1</span>
   <li><a href="#valdef-color-deeppink">deeppink</a><span>, in §6.1</span>
   <li><a href="#valdef-color-deepskyblue">deepskyblue</a><span>, in §6.1</span>
   <li><a href="#typedef-deprecated-colors">&lt;deprecated-colors></a><span>, in §Unnumbered section</span>
   <li><a href="#funcdef-device-cmyk">device-cmyk()</a><span>, in §12</span>
   <li><a href="#valdef-color-dimgray">dimgray</a><span>, in §6.1</span>
   <li><a href="#valdef-color-dimgrey">dimgrey</a><span>, in §6.1</span>
   <li><a href="#valdef-color-display-p3">display-p3</a><span>, in §10.2</span>
   <li><a href="#valdef-color-dodgerblue">dodgerblue</a><span>, in §6.1</span>
   <li><a href="#valdef-system-color-field">Field</a><span>, in §6.2</span>
   <li><a href="#valdef-system-color-fieldtext">FieldText</a><span>, in §6.2</span>
   <li><a href="#valdef-color-firebrick">firebrick</a><span>, in §6.1</span>
   <li><a href="#valdef-color-floralwhite">floralwhite</a><span>, in §6.1</span>
   <li><a href="#valdef-color-forestgreen">forestgreen</a><span>, in §6.1</span>
   <li><a href="#valdef-color-fuchsia">fuchsia</a><span>, in §6.1</span>
   <li><a href="#valdef-color-gainsboro">gainsboro</a><span>, in §6.1</span>
   <li><a href="#gamut">gamut</a><span>, in §2</span>
   <li><a href="#valdef-color-ghostwhite">ghostwhite</a><span>, in §6.1</span>
   <li><a href="#valdef-color-gold">gold</a><span>, in §6.1</span>
   <li><a href="#valdef-color-goldenrod">goldenrod</a><span>, in §6.1</span>
   <li><a href="#valdef-color-gray">gray</a><span>, in §6.1</span>
   <li><a href="#valdef-system-color-graytext">GrayText</a><span>, in §6.2</span>
   <li><a href="#valdef-color-green">green</a><span>, in §6.1</span>
   <li><a href="#valdef-color-greenyellow">greenyellow</a><span>, in §6.1</span>
   <li><a href="#valdef-color-grey">grey</a><span>, in §6.1</span>
   <li><a href="#typedef-hex-color">&lt;hex-color></a><span>, in §5.2</span>
   <li><a href="#hex-color">hex color</a><span>, in §5.2</span>
   <li><a href="#hex-color">hex color notation</a><span>, in §5.2</span>
   <li><a href="#valdef-system-color-highlight">Highlight</a><span>, in §6.2</span>
   <li><a href="#valdef-system-color-highlighttext">HighlightText</a><span>, in §6.2</span>
   <li><a href="#valdef-color-honeydew">honeydew</a><span>, in §6.1</span>
   <li><a href="#valdef-color-hotpink">hotpink</a><span>, in §6.1</span>
   <li><a href="#funcdef-hsl">hsl()</a><span>, in §7</span>
   <li><a href="#funcdef-hsla">hsla()</a><span>, in §7</span>
   <li><a href="#typedef-hue">&lt;hue></a><span>, in §7</span>
   <li><a href="#funcdef-hwb">hwb()</a><span>, in §8</span>
   <li><a href="#inactiveborder">InactiveBorder</a><span>, in §Unnumbered section</span>
   <li><a href="#inactivecaption">InactiveCaption</a><span>, in §Unnumbered section</span>
   <li><a href="#inactivecaptiontext">InactiveCaptionText</a><span>, in §Unnumbered section</span>
   <li><a href="#valdef-color-indianred">indianred</a><span>, in §6.1</span>
   <li><a href="#valdef-color-indigo">indigo</a><span>, in §6.1</span>
   <li><a href="#infobackground">InfoBackground</a><span>, in §Unnumbered section</span>
   <li><a href="#infotext">InfoText</a><span>, in §Unnumbered section</span>
   <li><a href="#invalid-color">invalid color</a><span>, in §10.1</span>
   <li><a href="#valdef-color-ivory">ivory</a><span>, in §6.1</span>
   <li><a href="#valdef-color-khaki">khaki</a><span>, in §6.1</span>
   <li><a href="#funcdef-lab">lab()</a><span>, in §9.1</span>
   <li><a href="#valdef-color-lavender">lavender</a><span>, in §6.1</span>
   <li><a href="#valdef-color-lavenderblush">lavenderblush</a><span>, in §6.1</span>
   <li><a href="#valdef-color-lawngreen">lawngreen</a><span>, in §6.1</span>
   <li><a href="#funcdef-lch">lch()</a><span>, in §9.1</span>
   <li><a href="#valdef-color-lemonchiffon">lemonchiffon</a><span>, in §6.1</span>
   <li><a href="#valdef-color-lightblue">lightblue</a><span>, in §6.1</span>
   <li><a href="#valdef-color-lightcoral">lightcoral</a><span>, in §6.1</span>
   <li><a href="#valdef-color-lightcyan">lightcyan</a><span>, in §6.1</span>
   <li><a href="#valdef-color-lightgoldenrodyellow">lightgoldenrodyellow</a><span>, in §6.1</span>
   <li><a href="#valdef-color-lightgray">lightgray</a><span>, in §6.1</span>
   <li><a href="#valdef-color-lightgreen">lightgreen</a><span>, in §6.1</span>
   <li><a href="#valdef-color-lightgrey">lightgrey</a><span>, in §6.1</span>
   <li><a href="#valdef-color-lightpink">lightpink</a><span>, in §6.1</span>
   <li><a href="#valdef-color-lightsalmon">lightsalmon</a><span>, in §6.1</span>
   <li><a href="#valdef-color-lightseagreen">lightseagreen</a><span>, in §6.1</span>
   <li><a href="#valdef-color-lightskyblue">lightskyblue</a><span>, in §6.1</span>
   <li><a href="#valdef-color-lightslategray">lightslategray</a><span>, in §6.1</span>
   <li><a href="#valdef-color-lightslategrey">lightslategrey</a><span>, in §6.1</span>
   <li><a href="#valdef-color-lightsteelblue">lightsteelblue</a><span>, in §6.1</span>
   <li><a href="#valdef-color-lightyellow">lightyellow</a><span>, in §6.1</span>
   <li><a href="#valdef-color-lime">lime</a><span>, in §6.1</span>
   <li><a href="#valdef-color-limegreen">limegreen</a><span>, in §6.1</span>
   <li><a href="#linear-light-sRGB">linear-light sRGB</a><span>, in §9.2</span>
   <li><a href="#valdef-color-linen">linen</a><span>, in §6.1</span>
   <li><a href="#valdef-system-color-linktext">LinkText</a><span>, in §6.2</span>
   <li><a href="#valdef-color-magenta">magenta</a><span>, in §6.1</span>
   <li><a href="#valdef-color-maroon">maroon</a><span>, in §6.1</span>
   <li><a href="#valdef-color-mediumaquamarine">mediumaquamarine</a><span>, in §6.1</span>
   <li><a href="#valdef-color-mediumblue">mediumblue</a><span>, in §6.1</span>
   <li><a href="#valdef-color-mediumorchid">mediumorchid</a><span>, in §6.1</span>
   <li><a href="#valdef-color-mediumpurple">mediumpurple</a><span>, in §6.1</span>
   <li><a href="#valdef-color-mediumseagreen">mediumseagreen</a><span>, in §6.1</span>
   <li><a href="#valdef-color-mediumslateblue">mediumslateblue</a><span>, in §6.1</span>
   <li><a href="#valdef-color-mediumspringgreen">mediumspringgreen</a><span>, in §6.1</span>
   <li><a href="#valdef-color-mediumturquoise">mediumturquoise</a><span>, in §6.1</span>
   <li><a href="#valdef-color-mediumvioletred">mediumvioletred</a><span>, in §6.1</span>
   <li><a href="#menu">Menu</a><span>, in §Unnumbered section</span>
   <li><a href="#menutext">MenuText</a><span>, in §Unnumbered section</span>
   <li><a href="#valdef-color-midnightblue">midnightblue</a><span>, in §6.1</span>
   <li><a href="#valdef-color-mintcream">mintcream</a><span>, in §6.1</span>
   <li><a href="#valdef-color-mistyrose">mistyrose</a><span>, in §6.1</span>
   <li><a href="#valdef-color-moccasin">moccasin</a><span>, in §6.1</span>
   <li><a href="#naively-convert-from-rgba-to-cmyk">naively converted to CMYK</a><span>, in §12.1</span>
   <li><a href="#naively-convert-from-cmyk-to-rgba">naively converted to RGBA</a><span>, in §12.1</span>
   <li><a href="#naively-convert-from-cmyk-to-rgba">naively convert from CMYK to RGBA</a><span>, in §12.1</span>
   <li><a href="#naively-convert-from-rgba-to-cmyk">naively convert from RGBA to CMYK</a><span>, in §12.1</span>
   <li><a href="#typedef-named-color">&lt;named-color></a><span>, in §6.1</span>
   <li><a href="#named-color">named color</a><span>, in §6.1</span>
   <li><a href="#valdef-color-navajowhite">navajowhite</a><span>, in §6.1</span>
   <li><a href="#valdef-color-navy">navy</a><span>, in §6.1</span>
   <li><a href="#valdef-color-oldlace">oldlace</a><span>, in §6.1</span>
   <li><a href="#valdef-color-olive">olive</a><span>, in §6.1</span>
   <li><a href="#valdef-color-olivedrab">olivedrab</a><span>, in §6.1</span>
   <li><a href="#propdef-opacity">opacity</a><span>, in §13</span>
   <li><a href="#opaque-black">opaque black</a><span>, in §4</span>
   <li><a href="#valdef-color-orange">orange</a><span>, in §6.1</span>
   <li><a href="#valdef-color-orangered">orangered</a><span>, in §6.1</span>
   <li><a href="#valdef-color-orchid">orchid</a><span>, in §6.1</span>
   <li><a href="#valdef-color-palegoldenrod">palegoldenrod</a><span>, in §6.1</span>
   <li><a href="#valdef-color-palegreen">palegreen</a><span>, in §6.1</span>
   <li><a href="#valdef-color-paleturquoise">paleturquoise</a><span>, in §6.1</span>
   <li><a href="#valdef-color-palevioletred">palevioletred</a><span>, in §6.1</span>
   <li><a href="#valdef-color-papayawhip">papayawhip</a><span>, in §6.1</span>
   <li><a href="#valdef-color-peachpuff">peachpuff</a><span>, in §6.1</span>
   <li><a href="#valdef-color-profile-rendering-intent-perceptual">perceptual</a><span>, in §10.3</span>
   <li><a href="#valdef-color-peru">peru</a><span>, in §6.1</span>
   <li><a href="#valdef-color-pink">pink</a><span>, in §6.1</span>
   <li><a href="#valdef-color-plum">plum</a><span>, in §6.1</span>
   <li><a href="#valdef-color-powderblue">powderblue</a><span>, in §6.1</span>
   <li><a href="#valdef-color-prophoto-rgb">prophoto-rgb</a><span>, in §10.2</span>
   <li><a href="#valdef-color-purple">purple</a><span>, in §6.1</span>
   <li><a href="#valdef-color-rebeccapurple">rebeccapurple</a><span>, in §6.1</span>
   <li><a href="#valdef-color-rec-2020">rec-2020</a><span>, in §10.2</span>
   <li><a href="#valdef-color-red">red</a><span>, in §6.1</span>
   <li><a href="#valdef-color-profile-rendering-intent-relative-colorimetric">relative-colorimetric</a><span>, in §10.3</span>
   <li><a href="#descdef-color-profile-rendering-intent">rendering-intent</a><span>, in §10.3</span>
   <li><a href="#funcdef-rgb">rgb()</a><span>, in §5.1</span>
   <li><a href="#funcdef-rgba">rgba()</a><span>, in §5.1</span>
   <li><a href="#valdef-color-rosybrown">rosybrown</a><span>, in §6.1</span>
   <li><a href="#valdef-color-royalblue">royalblue</a><span>, in §6.1</span>
   <li><a href="#valdef-color-saddlebrown">saddlebrown</a><span>, in §6.1</span>
   <li><a href="#valdef-color-salmon">salmon</a><span>, in §6.1</span>
   <li><a href="#valdef-color-sandybrown">sandybrown</a><span>, in §6.1</span>
   <li><a href="#valdef-color-profile-rendering-intent-saturation">saturation</a><span>, in §10.3</span>
   <li><a href="#scrollbar">Scrollbar</a><span>, in §Unnumbered section</span>
   <li><a href="#valdef-color-seagreen">seagreen</a><span>, in §6.1</span>
   <li><a href="#valdef-color-seashell">seashell</a><span>, in §6.1</span>
   <li><a href="#valdef-color-sienna">sienna</a><span>, in §6.1</span>
   <li><a href="#valdef-color-silver">silver</a><span>, in §6.1</span>
   <li><a href="#valdef-color-skyblue">skyblue</a><span>, in §6.1</span>
   <li><a href="#valdef-color-slateblue">slateblue</a><span>, in §6.1</span>
   <li><a href="#valdef-color-slategray">slategray</a><span>, in §6.1</span>
   <li><a href="#valdef-color-slategrey">slategrey</a><span>, in §6.1</span>
   <li><a href="#valdef-color-snow">snow</a><span>, in §6.1</span>
   <li><a href="#valdef-color-springgreen">springgreen</a><span>, in §6.1</span>
   <li><a href="#descdef-color-profile-src">src</a><span>, in §10.3</span>
   <li><a href="#valdef-color-srgb">srgb</a><span>, in §10.2</span>
   <li><a href="#sRGB">sRGB</a><span>, in §5</span>
   <li><a href="#valdef-color-steelblue">steelblue</a><span>, in §6.1</span>
   <li><a href="#typedef-system-color">&lt;system-color></a><span>, in §6.2</span>
   <li><a href="#css-system-colors">system colors</a><span>, in §6.1</span>
   <li><a href="#valdef-color-tan">tan</a><span>, in §6.1</span>
   <li><a href="#valdef-color-teal">teal</a><span>, in §6.1</span>
   <li><a href="#valdef-color-thistle">thistle</a><span>, in §6.1</span>
   <li><a href="#threeddarkshadow">ThreeDDarkShadow</a><span>, in §Unnumbered section</span>
   <li><a href="#threedface">ThreeDFace</a><span>, in §Unnumbered section</span>
   <li><a href="#threedhighlight">ThreeDHighlight</a><span>, in §Unnumbered section</span>
   <li><a href="#threedlightshadow">ThreeDLightShadow</a><span>, in §Unnumbered section</span>
   <li><a href="#threedshadow">ThreeDShadow</a><span>, in §Unnumbered section</span>
   <li><a href="#valdef-color-tomato">tomato</a><span>, in §6.1</span>
   <li><a href="#valdef-color-transparent">transparent</a><span>, in §6.3</span>
   <li><a href="#transparent-black">transparent black</a><span>, in §4</span>
   <li><a href="#valdef-color-turquoise">turquoise</a><span>, in §6.1</span>
   <li><a href="#untagged-image">untagged image</a><span>, in §4.2</span>
   <li><a href="#used-color">used color</a><span>, in §4.3</span>
   <li><a href="#valid-color">valid color</a><span>, in §10.1</span>
   <li><a href="#valdef-color-violet">violet</a><span>, in §6.1</span>
   <li><a href="#valdef-system-color-visitedtext">VisitedText</a><span>, in §6.2</span>
   <li><a href="#valdef-color-wheat">wheat</a><span>, in §6.1</span>
   <li><a href="#valdef-color-white">white</a><span>, in §6.1</span>
   <li><a href="#valdef-color-whitesmoke">whitesmoke</a><span>, in §6.1</span>
   <li><a href="#window">Window</a><span>, in §Unnumbered section</span>
   <li><a href="#windowframe">WindowFrame</a><span>, in §Unnumbered section</span>
   <li><a href="#windowtext">WindowText</a><span>, in §Unnumbered section</span>
   <li><a href="#valdef-color-yellow">yellow</a><span>, in §6.1</span>
   <li><a href="#valdef-color-yellowgreen">yellowgreen</a><span>, in §6.1</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-actual-value">
   <a href="https://drafts.csswg.org/css-cascade-4/#actual-value">https://drafts.csswg.org/css-cascade-4/#actual-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-actual-value">4.3. 
Resolving &lt;color> Values</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-computed-value">
   <a href="https://drafts.csswg.org/css-cascade-4/#computed-value">https://drafts.csswg.org/css-cascade-4/#computed-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-computed-value">4.3. 
Resolving &lt;color> Values</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-inherited-value">
   <a href="https://drafts.csswg.org/css-cascade-4/#inherited-value">https://drafts.csswg.org/css-cascade-4/#inherited-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inherited-value">4.3. 
Resolving &lt;color> Values</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-specified-value">
   <a href="https://drafts.csswg.org/css-cascade-4/#specified-value">https://drafts.csswg.org/css-cascade-4/#specified-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-specified-value">4.3. 
Resolving &lt;color> Values</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-used-value">
   <a href="https://drafts.csswg.org/css-cascade-4/#used-value">https://drafts.csswg.org/css-cascade-4/#used-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-used-value">4.3. 
Resolving &lt;color> Values</a> <a href="#ref-for-used-value①">(2)</a>
    <li><a href="#ref-for-used-value②">6.4. 
The currentcolor keyword</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-forced-colors-mode">
   <a href="https://drafts.csswg.org/css-color-adjust-1/#forced-colors-mode">https://drafts.csswg.org/css-color-adjust-1/#forced-colors-mode</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-forced-colors-mode">6.2. 
System Colors</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-z-index-auto">
   <a href="https://drafts.csswg.org/css-position-3/#valdef-z-index-auto">https://drafts.csswg.org/css-position-3/#valdef-z-index-auto</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-z-index-auto">13. 
Transparency: the opacity property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-stacking-context">
   <a href="https://drafts.csswg.org/css-position-3/#stacking-context">https://drafts.csswg.org/css-position-3/#stacking-context</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-stacking-context">13. 
Transparency: the opacity property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-z-index">
   <a href="https://drafts.csswg.org/css-position-3/#propdef-z-index">https://drafts.csswg.org/css-position-3/#propdef-z-index</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-z-index">13. 
Transparency: the opacity property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-declaration-list">
   <a href="https://drafts.csswg.org/css-syntax-3/#typedef-declaration-list">https://drafts.csswg.org/css-syntax-3/#typedef-declaration-list</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-declaration-list">10.3. 
Specifying a color profile: the @color-profile at-rule</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-hash-token">
   <a href="https://drafts.csswg.org/css-syntax-3/#typedef-hash-token">https://drafts.csswg.org/css-syntax-3/#typedef-hash-token</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-hash-token">5.2. 
The RGB hexadecimal notations: #RRGGBB</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-angle-value">
   <a href="https://drafts.csswg.org/css-values-3/#angle-value">https://drafts.csswg.org/css-values-3/#angle-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-angle-value">7. 
HSL Colors: hsl() and hsla() functions</a>
    <li><a href="#ref-for-angle-value①"> Changes from Colors 3</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-integer-value">
   <a href="https://drafts.csswg.org/css-values-3/#integer-value">https://drafts.csswg.org/css-values-3/#integer-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-integer-value"> Changes from Colors 3</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-number-value">
   <a href="https://drafts.csswg.org/css-values-3/#number-value">https://drafts.csswg.org/css-values-3/#number-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-number-value">5.1. 
The RGB functions: rgb() and rgba()</a> <a href="#ref-for-number-value①">(2)</a> <a href="#ref-for-number-value②">(3)</a> <a href="#ref-for-number-value③">(4)</a> <a href="#ref-for-number-value④">(5)</a>
    <li><a href="#ref-for-number-value⑤">7. 
HSL Colors: hsl() and hsla() functions</a>
    <li><a href="#ref-for-number-value⑥">9.1. 
Specifying Lab and LCH: the lab() and lch() functional notations</a> <a href="#ref-for-number-value⑦">(2)</a> <a href="#ref-for-number-value⑧">(3)</a>
    <li><a href="#ref-for-number-value⑨">10.1. Specifying profiled colors: the color() function</a> <a href="#ref-for-number-value①⓪">(2)</a> <a href="#ref-for-number-value①①">(3)</a> <a href="#ref-for-number-value①②">(4)</a> <a href="#ref-for-number-value①③">(5)</a> <a href="#ref-for-number-value①④">(6)</a>
    <li><a href="#ref-for-number-value①⑤">12. 
Device-dependent CMYK Colors: the device-cmyk() function</a>
    <li><a href="#ref-for-number-value①⑥"> Changes from Colors 3</a> <a href="#ref-for-number-value①⑦">(2)</a> <a href="#ref-for-number-value①⑧">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-percentage-value">
   <a href="https://drafts.csswg.org/css-values-3/#percentage-value">https://drafts.csswg.org/css-values-3/#percentage-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-percentage-value">5.1. 
The RGB functions: rgb() and rgba()</a> <a href="#ref-for-percentage-value①">(2)</a> <a href="#ref-for-percentage-value②">(3)</a> <a href="#ref-for-percentage-value③">(4)</a> <a href="#ref-for-percentage-value④">(5)</a>
    <li><a href="#ref-for-percentage-value⑤">7. 
HSL Colors: hsl() and hsla() functions</a> <a href="#ref-for-percentage-value⑥">(2)</a> <a href="#ref-for-percentage-value⑦">(3)</a> <a href="#ref-for-percentage-value⑧">(4)</a>
    <li><a href="#ref-for-percentage-value⑨">8. 
HWB Colors: hwb() function</a> <a href="#ref-for-percentage-value①⓪">(2)</a>
    <li><a href="#ref-for-percentage-value①①">9.1. 
Specifying Lab and LCH: the lab() and lch() functional notations</a> <a href="#ref-for-percentage-value①②">(2)</a>
    <li><a href="#ref-for-percentage-value①③">12. 
Device-dependent CMYK Colors: the device-cmyk() function</a>
    <li><a href="#ref-for-percentage-value①④"> Changes from Colors 3</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-string-value">
   <a href="https://drafts.csswg.org/css-values-3/#string-value">https://drafts.csswg.org/css-values-3/#string-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-string-value">10.1. Specifying profiled colors: the color() function</a> <a href="#ref-for-string-value①">(2)</a> <a href="#ref-for-string-value②">(3)</a> <a href="#ref-for-string-value③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-url-value">
   <a href="https://drafts.csswg.org/css-values-3/#url-value">https://drafts.csswg.org/css-values-3/#url-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-url-value">10.3. 
Specifying a color profile: the @color-profile at-rule</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mult-comma">
   <a href="https://drafts.csswg.org/css-values-4/#mult-comma">https://drafts.csswg.org/css-values-4/#mult-comma</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mult-comma">5.1. 
The RGB functions: rgb() and rgba()</a> <a href="#ref-for-mult-comma①">(2)</a>
    <li><a href="#ref-for-mult-comma②">10.1. Specifying profiled colors: the color() function</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mult-one-plus">
   <a href="https://drafts.csswg.org/css-values-4/#mult-one-plus">https://drafts.csswg.org/css-values-4/#mult-one-plus</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mult-one-plus">10.1. Specifying profiled colors: the color() function</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-comb-comma">
   <a href="https://drafts.csswg.org/css-values-4/#comb-comma">https://drafts.csswg.org/css-values-4/#comb-comma</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-comb-comma">5.1. 
The RGB functions: rgb() and rgba()</a> <a href="#ref-for-comb-comma①">(2)</a>
    <li><a href="#ref-for-comb-comma②">7. 
HSL Colors: hsl() and hsla() functions</a> <a href="#ref-for-comb-comma③">(2)</a> <a href="#ref-for-comb-comma④">(3)</a>
    <li><a href="#ref-for-comb-comma⑤">10.1. Specifying profiled colors: the color() function</a>
    <li><a href="#ref-for-comb-comma⑥">12. 
Device-dependent CMYK Colors: the device-cmyk() function</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-identifier-value">
   <a href="https://drafts.csswg.org/css-values-4/#identifier-value">https://drafts.csswg.org/css-values-4/#identifier-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-identifier-value">10.3. 
Specifying a color profile: the @color-profile at-rule</a> <a href="#ref-for-identifier-value①">(2)</a> <a href="#ref-for-identifier-value②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-ident">
   <a href="https://drafts.csswg.org/css-values-4/#typedef-ident">https://drafts.csswg.org/css-values-4/#typedef-ident</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-ident">6.1. 
Named Colors</a> <a href="#ref-for-typedef-ident①">(2)</a>
    <li><a href="#ref-for-typedef-ident②">10.1. Specifying profiled colors: the color() function</a> <a href="#ref-for-typedef-ident③">(2)</a> <a href="#ref-for-typedef-ident④">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mult-opt">
   <a href="https://drafts.csswg.org/css-values-4/#mult-opt">https://drafts.csswg.org/css-values-4/#mult-opt</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mult-opt">5.1. 
The RGB functions: rgb() and rgba()</a> <a href="#ref-for-mult-opt①">(2)</a> <a href="#ref-for-mult-opt②">(3)</a> <a href="#ref-for-mult-opt③">(4)</a>
    <li><a href="#ref-for-mult-opt④">7. 
HSL Colors: hsl() and hsla() functions</a> <a href="#ref-for-mult-opt⑤">(2)</a>
    <li><a href="#ref-for-mult-opt⑥">8. 
HWB Colors: hwb() function</a>
    <li><a href="#ref-for-mult-opt⑦">9.1. 
Specifying Lab and LCH: the lab() and lch() functional notations</a> <a href="#ref-for-mult-opt⑧">(2)</a>
    <li><a href="#ref-for-mult-opt⑨">10.1. Specifying profiled colors: the color() function</a> <a href="#ref-for-mult-opt①⓪">(2)</a> <a href="#ref-for-mult-opt①①">(3)</a>
    <li><a href="#ref-for-mult-opt①②">12. 
Device-dependent CMYK Colors: the device-cmyk() function</a> <a href="#ref-for-mult-opt①③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mult-num">
   <a href="https://drafts.csswg.org/css-values-4/#mult-num">https://drafts.csswg.org/css-values-4/#mult-num</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mult-num">5.1. 
The RGB functions: rgb() and rgba()</a> <a href="#ref-for-mult-num①">(2)</a>
    <li><a href="#ref-for-mult-num②">12. 
Device-dependent CMYK Colors: the device-cmyk() function</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-comb-one">
   <a href="https://drafts.csswg.org/css-values-4/#comb-one">https://drafts.csswg.org/css-values-4/#comb-one</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-comb-one">4. 
Representing Colors: the &lt;color> type</a> <a href="#ref-for-comb-one①">(2)</a> <a href="#ref-for-comb-one②">(3)</a> <a href="#ref-for-comb-one③">(4)</a> <a href="#ref-for-comb-one④">(5)</a> <a href="#ref-for-comb-one⑤">(6)</a> <a href="#ref-for-comb-one⑥">(7)</a> <a href="#ref-for-comb-one⑦">(8)</a> <a href="#ref-for-comb-one⑧">(9)</a> <a href="#ref-for-comb-one⑨">(10)</a> <a href="#ref-for-comb-one①⓪">(11)</a> <a href="#ref-for-comb-one①①">(12)</a>
    <li><a href="#ref-for-comb-one①②">5.1. 
The RGB functions: rgb() and rgba()</a> <a href="#ref-for-comb-one①③">(2)</a> <a href="#ref-for-comb-one①④">(3)</a>
    <li><a href="#ref-for-comb-one①⑤">7. 
HSL Colors: hsl() and hsla() functions</a>
    <li><a href="#ref-for-comb-one①⑥">10.1. Specifying profiled colors: the color() function</a>
    <li><a href="#ref-for-comb-one①⑦">10.3. 
Specifying a color profile: the @color-profile at-rule</a> <a href="#ref-for-comb-one①⑧">(2)</a> <a href="#ref-for-comb-one①⑨">(3)</a>
    <li><a href="#ref-for-comb-one②⓪">12. 
Device-dependent CMYK Colors: the device-cmyk() function</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-text-emphasis-color">
   <a href="https://drafts.csswg.org/css-text-decor-3/#propdef-text-emphasis-color">https://drafts.csswg.org/css-text-decor-3/#propdef-text-emphasis-color</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-text-emphasis-color">6.4. 
The currentcolor keyword</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-resolved-value">
   <a href="https://drafts.csswg.org/cssom-1/#resolved-value">https://drafts.csswg.org/cssom-1/#resolved-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-resolved-value">4.3. 
Resolving &lt;color> Values</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-media-feature">
   <a href="https://drafts.csswg.org/mediaqueries-4/#media-feature">https://drafts.csswg.org/mediaqueries-4/#media-feature</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-media-feature">6.2. 
System Colors</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-descdef-media-forced-colors">
   <a href="https://drafts.csswg.org/mediaqueries-5/#descdef-media-forced-colors">https://drafts.csswg.org/mediaqueries-5/#descdef-media-forced-colors</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-descdef-media-forced-colors">6.2. 
System Colors</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[css-cascade-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-actual-value" style="color:initial">actual value</span>
     <li><span class="dfn-paneled" id="term-for-computed-value" style="color:initial">computed value</span>
     <li><span class="dfn-paneled" id="term-for-inherited-value" style="color:initial">inherited value</span>
     <li><span class="dfn-paneled" id="term-for-specified-value" style="color:initial">specified value</span>
     <li><span class="dfn-paneled" id="term-for-used-value" style="color:initial">used value</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-color-adjust-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-forced-colors-mode" style="color:initial">forced colors mode</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-position-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-valdef-z-index-auto" style="color:initial">auto</span>
     <li><span class="dfn-paneled" id="term-for-stacking-context" style="color:initial">stacking context</span>
     <li><span class="dfn-paneled" id="term-for-propdef-z-index" style="color:initial">z-index</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-syntax-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-typedef-declaration-list" style="color:initial">&lt;declaration-list></span>
     <li><span class="dfn-paneled" id="term-for-typedef-hash-token" style="color:initial">&lt;hash-token></span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-values-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-angle-value" style="color:initial">&lt;angle></span>
     <li><span class="dfn-paneled" id="term-for-integer-value" style="color:initial">&lt;integer></span>
     <li><span class="dfn-paneled" id="term-for-number-value" style="color:initial">&lt;number></span>
     <li><span class="dfn-paneled" id="term-for-percentage-value" style="color:initial">&lt;percentage></span>
     <li><span class="dfn-paneled" id="term-for-string-value" style="color:initial">&lt;string></span>
     <li><span class="dfn-paneled" id="term-for-url-value" style="color:initial">&lt;url></span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-values-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-mult-comma" style="color:initial">#</span>
     <li><span class="dfn-paneled" id="term-for-mult-one-plus" style="color:initial">+</span>
     <li><span class="dfn-paneled" id="term-for-comb-comma" style="color:initial">,</span>
     <li><span class="dfn-paneled" id="term-for-identifier-value" style="color:initial">&lt;custom-ident></span>
     <li><span class="dfn-paneled" id="term-for-typedef-ident" style="color:initial">&lt;ident></span>
     <li><span class="dfn-paneled" id="term-for-mult-opt" style="color:initial">?</span>
     <li><span class="dfn-paneled" id="term-for-mult-num" style="color:initial">{a}</span>
     <li><span class="dfn-paneled" id="term-for-comb-one" style="color:initial">|</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS3-TEXT-DECOR]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-text-emphasis-color" style="color:initial">text-emphasis-color</span>
    </ul>
   <li>
    <a data-link-type="biblio">[cssom-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-resolved-value" style="color:initial">resolved value</span>
    </ul>
   <li>
    <a data-link-type="biblio">[mediaqueries-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-media-feature" style="color:initial">media feature</span>
    </ul>
   <li>
    <a data-link-type="biblio">[mediaqueries-5]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-descdef-media-forced-colors" style="color:initial">forced-colors</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-bradford-cat">[Bradford-CAT]
   <dd>Ming R. Luo; R. W. G. Hunt. A Chromatic Adaptation Transform and a Colour Inconstancy Index. Color Research &amp; Application 23(3) 154-158. June 1998. 
   <dt id="biblio-compositing">[Compositing]
   <dd>Rik Cabanier; Nikos Andronikos. <a href="https://www.w3.org/TR/compositing-1/">Compositing and Blending Level 1</a>. 13 January 2015. CR. URL: <a href="https://www.w3.org/TR/compositing-1/">https://www.w3.org/TR/compositing-1/</a>
   <dt id="biblio-css-cascade-4">[CSS-CASCADE-4]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-cascade-4/">CSS Cascading and Inheritance Level 4</a>. 28 August 2018. CR. URL: <a href="https://www.w3.org/TR/css-cascade-4/">https://www.w3.org/TR/css-cascade-4/</a>
   <dt id="biblio-css-color-adjust-1">[CSS-COLOR-ADJUST-1]
   <dd>Elika Etemad; Rossen Atanassov; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-color-adjust-1/">CSS Color Adjustment Module Level 1</a>. 23 May 2019. WD. URL: <a href="https://www.w3.org/TR/css-color-adjust-1/">https://www.w3.org/TR/css-color-adjust-1/</a>
   <dt id="biblio-css-position-3">[CSS-POSITION-3]
   <dd>Rossen Atanassov; Arron Eicholz. <a href="https://www.w3.org/TR/css-position-3/">CSS Positioned Layout Module Level 3</a>. 17 May 2016. WD. URL: <a href="https://www.w3.org/TR/css-position-3/">https://www.w3.org/TR/css-position-3/</a>
   <dt id="biblio-css-syntax-3">[CSS-SYNTAX-3]
   <dd>Tab Atkins Jr.; Simon Sapin. <a href="https://www.w3.org/TR/css-syntax-3/">CSS Syntax Module Level 3</a>. 20 February 2014. CR. URL: <a href="https://www.w3.org/TR/css-syntax-3/">https://www.w3.org/TR/css-syntax-3/</a>
   <dt id="biblio-css-values-3">[CSS-VALUES-3]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-3/">CSS Values and Units Module Level 3</a>. 31 January 2019. CR. URL: <a href="https://www.w3.org/TR/css-values-3/">https://www.w3.org/TR/css-values-3/</a>
   <dt id="biblio-css-values-4">[CSS-VALUES-4]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-4/">CSS Values and Units Module Level 4</a>. 31 January 2019. WD. URL: <a href="https://www.w3.org/TR/css-values-4/">https://www.w3.org/TR/css-values-4/</a>
   <dt id="biblio-css21">[CSS21]
   <dd>Bert Bos; et al. <a href="https://www.w3.org/TR/CSS2/">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. REC. URL: <a href="https://www.w3.org/TR/CSS2/">https://www.w3.org/TR/CSS2/</a>
   <dt id="biblio-cssom-1">[CSSOM-1]
   <dd>Simon Pieters; Glenn Adams. <a href="https://www.w3.org/TR/cssom-1/">CSS Object Model (CSSOM)</a>. 17 March 2016. WD. URL: <a href="https://www.w3.org/TR/cssom-1/">https://www.w3.org/TR/cssom-1/</a>
   <dt id="biblio-dci-p3">[DCI-P3]
   <dd><a href="http://ieeexplore.ieee.org/document/7290729/">SMPTE Recommended Practice - D-Cinema Quality — Reference Projector and Environment</a>. 2011. URL: <a href="http://ieeexplore.ieee.org/document/7290729/">http://ieeexplore.ieee.org/document/7290729/</a>
   <dt id="biblio-icc">[ICC]
   <dd><a href="http://www.color.org/specification/ICC1v43_2010-12.pdf">ICC.1:2010 (Profile version 4.3.0.0)</a>. December 2010. URL: <a href="http://www.color.org/specification/ICC1v43_2010-12.pdf">http://www.color.org/specification/ICC1v43_2010-12.pdf</a>
   <dt id="biblio-itu-r-bt601">[ITU-R-BT.601]
   <dd><a href="https://www.itu.int/rec/R-REC-BT.601/">Recommendation ITU-R BT.601-7 (03/2011), Studio encoding parameters of digital television for standard 4:3 and wide screen 16:9 aspect ratios</a>. 8 March 2011. Recommendation. URL: <a href="https://www.itu.int/rec/R-REC-BT.601/">https://www.itu.int/rec/R-REC-BT.601/</a>
   <dt id="biblio-itu-r-bt709">[ITU-R-BT.709]
   <dd><a href="https://www.itu.int/rec/R-REC-BT.709/">Recommendation ITU-R BT.709-6 (06/2015), Parameter values for the HDTV standards for production and international programme exchange</a>. 17 June 2015. Recommendation. URL: <a href="https://www.itu.int/rec/R-REC-BT.709/">https://www.itu.int/rec/R-REC-BT.709/</a>
   <dt id="biblio-mediaqueries-4">[MEDIAQUERIES-4]
   <dd>Florian Rivoal; Tab Atkins Jr.. <a href="https://www.w3.org/TR/mediaqueries-4/">Media Queries Level 4</a>. 5 September 2017. CR. URL: <a href="https://www.w3.org/TR/mediaqueries-4/">https://www.w3.org/TR/mediaqueries-4/</a>
   <dt id="biblio-mediaqueries-5">[MEDIAQUERIES-5]
   <dd>Media Queries Level 5 URL: <a href="https://drafts.csswg.org/mediaqueries-5/">https://drafts.csswg.org/mediaqueries-5/</a>
   <dt id="biblio-rec2020">[Rec.2020]
   <dd><a href="http://www.itu.int/rec/R-REC-BT.2020/en">Recommendation  ITU-R  BT.2020-2:  Parameter values for ultra-high definition television systems for production and international programme exchange </a>. October 2015. URL: <a href="http://www.itu.int/rec/R-REC-BT.2020/en">http://www.itu.int/rec/R-REC-BT.2020/en</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
   <dt id="biblio-smpte296">[SMPTE296]
   <dd><a href="https://doi.org/10.5594/SMPTE.ST296.2012">ST 296:2012, 1280 × 720 Progressive Image 4:2:2 and 4:4:4 Sample Structure — Analog and Digital Representation and Analog Interface</a>. 17 May 2012. Standard. URL: <a href="https://doi.org/10.5594/SMPTE.ST296.2012">https://doi.org/10.5594/SMPTE.ST296.2012</a>
   <dt id="biblio-srgb">[SRGB]
   <dd><a href="https://webstore.iec.ch/publication/6169">Multimedia systems and equipment - Colour measurement and management - Part 2-1: Colour management - Default RGB colour space - sRGB</a>. URL: <a href="https://webstore.iec.ch/publication/6169">https://webstore.iec.ch/publication/6169</a>
   <dt id="biblio-svg11">[SVG11]
   <dd>Erik Dahlström; et al. <a href="https://www.w3.org/TR/SVG11/">Scalable Vector Graphics (SVG) 1.1 (Second Edition)</a>. 16 August 2011. REC. URL: <a href="https://www.w3.org/TR/SVG11/">https://www.w3.org/TR/SVG11/</a>
  </dl>
  <h3 class="no-num no-ref heading settled" id="informative"><span class="content">Informative References</span><a class="self-link" href="#informative"></a></h3>
  <dl>
   <dt id="biblio-css3-text-decor">[CSS3-TEXT-DECOR]
   <dd>Elika Etemad; Koji Ishii. <a href="https://www.w3.org/TR/css-text-decor-3/">CSS Text Decoration Module Level 3</a>. 3 July 2018. CR. URL: <a href="https://www.w3.org/TR/css-text-decor-3/">https://www.w3.org/TR/css-text-decor-3/</a>
   <dt id="biblio-wcag20">[WCAG20]
   <dd>Ben Caldwell; et al. <a href="https://www.w3.org/TR/WCAG20/">Web Content Accessibility Guidelines (WCAG) 2.0</a>. 11 December 2008. REC. URL: <a href="https://www.w3.org/TR/WCAG20/">https://www.w3.org/TR/WCAG20/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="property-index"><span class="content">Property Index</span><a class="self-link" href="#property-index"></a></h2>
  <div class="big-element-wrapper">
   <table class="index">
    <thead>
     <tr>
      <th scope="col">Name
      <th scope="col">Value
      <th scope="col">Initial
      <th scope="col">Applies to
      <th scope="col">Inh.
      <th scope="col">%ages
      <th scope="col">Anim­ation type
      <th scope="col">Canonical order
      <th scope="col">Com­puted value
    <tbody>
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-color" id="ref-for-propdef-color⑧">color</a>
      <td>&lt;color>
      <td>black
      <td>all elements
      <td>yes
      <td>N/A
      <td>by computed value type
      <td>per grammar
      <td>computed color, see resolving color values
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-opacity" id="ref-for-propdef-opacity④">opacity</a>
      <td>&lt;alpha-value>
      <td>1
      <td>all elements
      <td>no
      <td>map to the range [0,1]
      <td>by computed value type
      <td>per grammar
      <td>specified number, clamped to the range [0,1]
   </table>
  </div>
  <h3 class="no-num no-ref heading settled" id="color-profile-descriptor-table"><span class="content"><a class="css" data-link-type="at-rule" href="#at-ruledef-profile" id="ref-for-at-ruledef-profile⑧">@color-profile</a> Descriptors</span><a class="self-link" href="#color-profile-descriptor-table"></a></h3>
  <div class="big-element-wrapper">
   <table class="index">
    <thead>
     <tr>
      <th scope="col">Name
      <th scope="col">Value
      <th scope="col">Initial
    <tbody>
     <tr>
      <th scope="row"><a class="css" data-link-type="descriptor" href="#descdef-color-profile-rendering-intent" id="ref-for-descdef-color-profile-rendering-intent①">rendering-intent</a>
      <td>relative-colorimetric | absolute-colorimetric | perceptual | saturation
      <td>relative-colorimetric
     <tr>
      <th scope="row"><a class="css" data-link-type="descriptor" href="#descdef-color-profile-src" id="ref-for-descdef-color-profile-src①">src</a>
      <td>&lt;url>
      <td>n/a
   </table>
  </div>
  <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content">Issues Index</span><a class="self-link" href="#issues-index"></a></h2>
  <div style="counter-reset:issue">
   <div class="issue"> Does working color space affect these values? <a href="https://github.com/w3c/csswg-drafts/issues/3844">&lt;https://github.com/w3c/csswg-drafts/issues/3844></a><a href="#issue-cc4164d0"> ↵ </a></div>
   <div class="issue"> Define something for <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-color-4/#typedef-deprecated-system-color">&lt;deprecated-system-color></a>? <a href="https://github.com/w3c/csswg-drafts/issues/3873">&lt;https://github.com/w3c/csswg-drafts/issues/3873></a><a href="#issue-cd24cab1"> ↵ </a></div>
   <div class="issue"> When should channel-clamping occur? <a href="https://github.com/w3c/csswg-drafts/issues/3845">&lt;https://github.com/w3c/csswg-drafts/issues/3845></a><a href="#issue-8fe76086"> ↵ </a></div>
   <div class="issue"> <a href="https://github.com/w3c/csswg-drafts/issues/3088">&lt;https://github.com/w3c/csswg-drafts/issues/3088></a><a href="#issue-d41d8cd9"> ↵ </a></div>
   <div class="issue"> <a href="https://github.com/w3c/csswg-drafts/issues/300">&lt;https://github.com/w3c/csswg-drafts/issues/300></a><a href="#issue-d41d8cd9①"> ↵ </a></div>
  </div>
  <aside class="dfn-panel" data-for="color">
   <b><a href="#color">#color</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-color">10. 
Profiled, Device-dependent Colors</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="colorspace">
   <b><a href="#colorspace">#colorspace</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-colorspace">1. 
Introduction</a> <a href="#ref-for-colorspace①">(2)</a>
    <li><a href="#ref-for-colorspace②">2. Color terminology</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="calibrated">
   <b><a href="#calibrated">#calibrated</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-calibrated">2. Color terminology</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-color">
   <b><a href="#propdef-color">#propdef-color</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-color">3. 
Foreground Color: the color property</a>
    <li><a href="#ref-for-propdef-color①">4.3. 
Resolving &lt;color> Values</a> <a href="#ref-for-propdef-color②">(2)</a> <a href="#ref-for-propdef-color③">(3)</a> <a href="#ref-for-propdef-color④">(4)</a>
    <li><a href="#ref-for-propdef-color⑤">6.4. 
The currentcolor keyword</a> <a href="#ref-for-propdef-color⑥">(2)</a>
    <li><a href="#ref-for-propdef-color⑦">14. 
Default Style Rules</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-color">
   <b><a href="#typedef-color">#typedef-color</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-color①">1. 
Introduction</a>
    <li><a href="#ref-for-typedef-color②">3. 
Foreground Color: the color property</a> <a href="#ref-for-typedef-color③">(2)</a> <a href="#ref-for-typedef-color④">(3)</a>
    <li><a href="#ref-for-typedef-color⑤">4. 
Representing Colors: the &lt;color> type</a> <a href="#ref-for-typedef-color⑥">(2)</a>
    <li><a href="#ref-for-typedef-color⑦">4.3. 
Resolving &lt;color> Values</a> <a href="#ref-for-typedef-color⑧">(2)</a>
    <li><a href="#ref-for-typedef-color⑨">6. 
Color Keywords</a>
    <li><a href="#ref-for-typedef-color①⓪">6.1. 
Named Colors</a>
    <li><a href="#ref-for-typedef-color①①">10.1. Specifying profiled colors: the color() function</a> <a href="#ref-for-typedef-color①②">(2)</a>
    <li><a href="#ref-for-typedef-color①③">12. 
Device-dependent CMYK Colors: the device-cmyk() function</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="opaque-black">
   <b><a href="#opaque-black">#opaque-black</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-opaque-black">10.1. Specifying profiled colors: the color() function</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="transparent-black">
   <b><a href="#transparent-black">#transparent-black</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-transparent-black">4.3. 
Resolving &lt;color> Values</a>
    <li><a href="#ref-for-transparent-black①">6.3. 
The transparent keyword</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="untagged-image">
   <b><a href="#untagged-image">#untagged-image</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-untagged-image">4.2. 
Color Spaces of Untagged Colors</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="funcdef-rgb">
   <b><a href="#funcdef-rgb">#funcdef-rgb</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-rgb">4. 
Representing Colors: the &lt;color> type</a> <a href="#ref-for-funcdef-rgb①">(2)</a>
    <li><a href="#ref-for-funcdef-rgb②">4.3. 
Resolving &lt;color> Values</a>
    <li><a href="#ref-for-funcdef-rgb③">5. 
sRGB Colors</a>
    <li><a href="#ref-for-funcdef-rgb④">5.1. 
The RGB functions: rgb() and rgba()</a> <a href="#ref-for-funcdef-rgb⑤">(2)</a> <a href="#ref-for-funcdef-rgb⑥">(3)</a> <a href="#ref-for-funcdef-rgb⑦">(4)</a>
    <li><a href="#ref-for-funcdef-rgb⑧">5.2. 
The RGB hexadecimal notations: #RRGGBB</a>
    <li><a href="#ref-for-funcdef-rgb⑨">7. 
HSL Colors: hsl() and hsla() functions</a>
    <li><a href="#ref-for-funcdef-rgb①⓪">8. 
HWB Colors: hwb() function</a>
    <li><a href="#ref-for-funcdef-rgb①①">9.1. 
Specifying Lab and LCH: the lab() and lch() functional notations</a> <a href="#ref-for-funcdef-rgb①②">(2)</a>
    <li><a href="#ref-for-funcdef-rgb①③">10.1. Specifying profiled colors: the color() function</a>
    <li><a href="#ref-for-funcdef-rgb①④">10.2. 
Predefined colorspaces: srgb, display-p3, a98-rgb, prophoto-rgb and rec-2020.</a>
    <li><a href="#ref-for-funcdef-rgb①⑤">12. 
Device-dependent CMYK Colors: the device-cmyk() function</a>
    <li><a href="#ref-for-funcdef-rgb①⑥">13. 
Transparency: the opacity property</a>
    <li><a href="#ref-for-funcdef-rgb①⑦"> Changes from Colors 3</a> <a href="#ref-for-funcdef-rgb①⑧">(2)</a> <a href="#ref-for-funcdef-rgb①⑨">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-alpha-value">
   <b><a href="#typedef-alpha-value">#typedef-alpha-value</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-alpha-value">5.1. 
The RGB functions: rgb() and rgba()</a> <a href="#ref-for-typedef-alpha-value①">(2)</a> <a href="#ref-for-typedef-alpha-value②">(3)</a> <a href="#ref-for-typedef-alpha-value③">(4)</a> <a href="#ref-for-typedef-alpha-value④">(5)</a>
    <li><a href="#ref-for-typedef-alpha-value⑤">7. 
HSL Colors: hsl() and hsla() functions</a> <a href="#ref-for-typedef-alpha-value⑥">(2)</a>
    <li><a href="#ref-for-typedef-alpha-value⑦">8. 
HWB Colors: hwb() function</a>
    <li><a href="#ref-for-typedef-alpha-value⑧">9.1. 
Specifying Lab and LCH: the lab() and lch() functional notations</a> <a href="#ref-for-typedef-alpha-value⑨">(2)</a> <a href="#ref-for-typedef-alpha-value①⓪">(3)</a> <a href="#ref-for-typedef-alpha-value①①">(4)</a>
    <li><a href="#ref-for-typedef-alpha-value①②">10.1. Specifying profiled colors: the color() function</a> <a href="#ref-for-typedef-alpha-value①③">(2)</a> <a href="#ref-for-typedef-alpha-value①④">(3)</a>
    <li><a href="#ref-for-typedef-alpha-value①⑤">12. 
Device-dependent CMYK Colors: the device-cmyk() function</a>
    <li><a href="#ref-for-typedef-alpha-value①⑥">13. 
Transparency: the opacity property</a> <a href="#ref-for-typedef-alpha-value①⑦">(2)</a>
    <li><a href="#ref-for-typedef-alpha-value①⑧"> Changes from Colors 3</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="funcdef-rgba">
   <b><a href="#funcdef-rgba">#funcdef-rgba</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-rgba">4. 
Representing Colors: the &lt;color> type</a>
    <li><a href="#ref-for-funcdef-rgba①">4.3. 
Resolving &lt;color> Values</a>
    <li><a href="#ref-for-funcdef-rgba②">5. 
sRGB Colors</a>
    <li><a href="#ref-for-funcdef-rgba③">5.1. 
The RGB functions: rgb() and rgba()</a>
    <li><a href="#ref-for-funcdef-rgba④"> Changes from Colors 3</a> <a href="#ref-for-funcdef-rgba⑤">(2)</a> <a href="#ref-for-funcdef-rgba⑥">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="hex-color">
   <b><a href="#hex-color">#hex-color</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-hex-color">4. 
Representing Colors: the &lt;color> type</a>
    <li><a href="#ref-for-hex-color①">4.3. 
Resolving &lt;color> Values</a>
    <li><a href="#ref-for-hex-color②">5. 
sRGB Colors</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-hex-color">
   <b><a href="#typedef-hex-color">#typedef-hex-color</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-hex-color">4. 
Representing Colors: the &lt;color> type</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="named-color">
   <b><a href="#named-color">#named-color</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-named-color">4. 
Representing Colors: the &lt;color> type</a>
    <li><a href="#ref-for-named-color①">4.3. 
Resolving &lt;color> Values</a>
    <li><a href="#ref-for-named-color②">5. 
sRGB Colors</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-named-color">
   <b><a href="#typedef-named-color">#typedef-named-color</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-named-color">4. 
Representing Colors: the &lt;color> type</a>
    <li><a href="#ref-for-typedef-named-color①">6.3. 
The transparent keyword</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-color-black">
   <b><a href="#valdef-color-black">#valdef-color-black</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-color-black">3. 
Foreground Color: the color property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-color-rebeccapurple">
   <b><a href="#valdef-color-rebeccapurple">#valdef-color-rebeccapurple</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-color-rebeccapurple"> Changes from Colors 3</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-color-red">
   <b><a href="#valdef-color-red">#valdef-color-red</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-color-red">7. 
HSL Colors: hsl() and hsla() functions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-color-white">
   <b><a href="#valdef-color-white">#valdef-color-white</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-color-white">14. 
Default Style Rules</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="css-system-colors">
   <b><a href="#css-system-colors">#css-system-colors</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-css-system-colors">4.3. 
Resolving &lt;color> Values</a>
    <li><a href="#ref-for-css-system-colors①"> Appendix A: Deprecated CSS System Colors</a> <a href="#ref-for-css-system-colors②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-system-color">
   <b><a href="#typedef-system-color">#typedef-system-color</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-system-color">4. 
Representing Colors: the &lt;color> type</a>
    <li><a href="#ref-for-typedef-system-color①">4.3. 
Resolving &lt;color> Values</a>
    <li><a href="#ref-for-typedef-system-color②">6.2. 
System Colors</a> <a href="#ref-for-typedef-system-color③">(2)</a> <a href="#ref-for-typedef-system-color④">(3)</a> <a href="#ref-for-typedef-system-color⑤">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-system-color-canvas">
   <b><a href="#valdef-system-color-canvas">#valdef-system-color-canvas</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-system-color-canvas">6.2. 
System Colors</a> <a href="#ref-for-valdef-system-color-canvas①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-system-color-canvastext">
   <b><a href="#valdef-system-color-canvastext">#valdef-system-color-canvastext</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-system-color-canvastext">6.2. 
System Colors</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-system-color-linktext">
   <b><a href="#valdef-system-color-linktext">#valdef-system-color-linktext</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-system-color-linktext">6.2. 
System Colors</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-system-color-visitedtext">
   <b><a href="#valdef-system-color-visitedtext">#valdef-system-color-visitedtext</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-system-color-visitedtext">6.2. 
System Colors</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-system-color-activetext">
   <b><a href="#valdef-system-color-activetext">#valdef-system-color-activetext</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-system-color-activetext">6.2. 
System Colors</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-system-color-buttonface">
   <b><a href="#valdef-system-color-buttonface">#valdef-system-color-buttonface</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-system-color-buttonface">6.2. 
System Colors</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-system-color-buttontext">
   <b><a href="#valdef-system-color-buttontext">#valdef-system-color-buttontext</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-system-color-buttontext">6.2. 
System Colors</a> <a href="#ref-for-valdef-system-color-buttontext①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-system-color-field">
   <b><a href="#valdef-system-color-field">#valdef-system-color-field</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-system-color-field">6.2. 
System Colors</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-system-color-fieldtext">
   <b><a href="#valdef-system-color-fieldtext">#valdef-system-color-fieldtext</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-system-color-fieldtext">6.2. 
System Colors</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-system-color-highlight">
   <b><a href="#valdef-system-color-highlight">#valdef-system-color-highlight</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-system-color-highlight">6.2. 
System Colors</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-system-color-highlighttext">
   <b><a href="#valdef-system-color-highlighttext">#valdef-system-color-highlighttext</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-system-color-highlighttext">6.2. 
System Colors</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-system-color-graytext">
   <b><a href="#valdef-system-color-graytext">#valdef-system-color-graytext</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-system-color-graytext">6.2. 
System Colors</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-color-transparent">
   <b><a href="#valdef-color-transparent">#valdef-color-transparent</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-color-transparent">4.3. 
Resolving &lt;color> Values</a>
    <li><a href="#ref-for-valdef-color-transparent①">5. 
sRGB Colors</a>
    <li><a href="#ref-for-valdef-color-transparent②">6.1. 
Named Colors</a>
    <li><a href="#ref-for-valdef-color-transparent③">6.3. 
The transparent keyword</a>
    <li><a href="#ref-for-valdef-color-transparent④">14. 
Default Style Rules</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-color-currentcolor">
   <b><a href="#valdef-color-currentcolor">#valdef-color-currentcolor</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-color-currentcolor">3. 
Foreground Color: the color property</a> <a href="#ref-for-valdef-color-currentcolor①">(2)</a>
    <li><a href="#ref-for-valdef-color-currentcolor②">4.3. 
Resolving &lt;color> Values</a> <a href="#ref-for-valdef-color-currentcolor③">(2)</a> <a href="#ref-for-valdef-color-currentcolor④">(3)</a>
    <li><a href="#ref-for-valdef-color-currentcolor⑤">6.1. 
Named Colors</a>
    <li><a href="#ref-for-valdef-color-currentcolor⑥">6.4. 
The currentcolor keyword</a> <a href="#ref-for-valdef-color-currentcolor⑦">(2)</a> <a href="#ref-for-valdef-color-currentcolor⑧">(3)</a> <a href="#ref-for-valdef-color-currentcolor⑨">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="funcdef-hsl">
   <b><a href="#funcdef-hsl">#funcdef-hsl</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-hsl">4. 
Representing Colors: the &lt;color> type</a> <a href="#ref-for-funcdef-hsl①">(2)</a>
    <li><a href="#ref-for-funcdef-hsl②">4.3. 
Resolving &lt;color> Values</a>
    <li><a href="#ref-for-funcdef-hsl③">5. 
sRGB Colors</a>
    <li><a href="#ref-for-funcdef-hsl④">7. 
HSL Colors: hsl() and hsla() functions</a> <a href="#ref-for-funcdef-hsl⑤">(2)</a> <a href="#ref-for-funcdef-hsl⑥">(3)</a> <a href="#ref-for-funcdef-hsl⑦">(4)</a>
    <li><a href="#ref-for-funcdef-hsl⑧">8. 
HWB Colors: hwb() function</a>
    <li><a href="#ref-for-funcdef-hsl⑨">9.1. 
Specifying Lab and LCH: the lab() and lch() functional notations</a>
    <li><a href="#ref-for-funcdef-hsl①⓪"> Changes from Colors 3</a> <a href="#ref-for-funcdef-hsl①①">(2)</a> <a href="#ref-for-funcdef-hsl①②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-hue">
   <b><a href="#typedef-hue">#typedef-hue</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-hue">7. 
HSL Colors: hsl() and hsla() functions</a> <a href="#ref-for-typedef-hue①">(2)</a>
    <li><a href="#ref-for-typedef-hue②">8. 
HWB Colors: hwb() function</a>
    <li><a href="#ref-for-typedef-hue③">9.1. 
Specifying Lab and LCH: the lab() and lch() functional notations</a> <a href="#ref-for-typedef-hue④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="funcdef-hsla">
   <b><a href="#funcdef-hsla">#funcdef-hsla</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-hsla">4. 
Representing Colors: the &lt;color> type</a>
    <li><a href="#ref-for-funcdef-hsla①">4.3. 
Resolving &lt;color> Values</a>
    <li><a href="#ref-for-funcdef-hsla②">5. 
sRGB Colors</a>
    <li><a href="#ref-for-funcdef-hsla③">7. 
HSL Colors: hsl() and hsla() functions</a>
    <li><a href="#ref-for-funcdef-hsla④"> Changes from Colors 3</a> <a href="#ref-for-funcdef-hsla⑤">(2)</a> <a href="#ref-for-funcdef-hsla⑥">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="funcdef-hwb">
   <b><a href="#funcdef-hwb">#funcdef-hwb</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-hwb">4. 
Representing Colors: the &lt;color> type</a>
    <li><a href="#ref-for-funcdef-hwb①">4.3. 
Resolving &lt;color> Values</a>
    <li><a href="#ref-for-funcdef-hwb②">5. 
sRGB Colors</a>
    <li><a href="#ref-for-funcdef-hwb③">8. 
HWB Colors: hwb() function</a> <a href="#ref-for-funcdef-hwb④">(2)</a>
    <li><a href="#ref-for-funcdef-hwb⑤"> Changes from Colors 3</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="funcdef-lab">
   <b><a href="#funcdef-lab">#funcdef-lab</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-lab">4. 
Representing Colors: the &lt;color> type</a>
    <li><a href="#ref-for-funcdef-lab①">4.3. 
Resolving &lt;color> Values</a>
    <li><a href="#ref-for-funcdef-lab②">9.1. 
Specifying Lab and LCH: the lab() and lch() functional notations</a> <a href="#ref-for-funcdef-lab③">(2)</a>
    <li><a href="#ref-for-funcdef-lab④"> Changes from Colors 3</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="funcdef-lch">
   <b><a href="#funcdef-lch">#funcdef-lch</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-lch">4. 
Representing Colors: the &lt;color> type</a> <a href="#ref-for-funcdef-lch①">(2)</a>
    <li><a href="#ref-for-funcdef-lch②">4.3. 
Resolving &lt;color> Values</a>
    <li><a href="#ref-for-funcdef-lch③">9.1. 
Specifying Lab and LCH: the lab() and lch() functional notations</a>
    <li><a href="#ref-for-funcdef-lch④"> Changes from Colors 3</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="funcdef-color">
   <b><a href="#funcdef-color">#funcdef-color</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-color">4. 
Representing Colors: the &lt;color> type</a>
    <li><a href="#ref-for-funcdef-color①">4.3. 
Resolving &lt;color> Values</a>
    <li><a href="#ref-for-funcdef-color②">10.1. Specifying profiled colors: the color() function</a> <a href="#ref-for-funcdef-color③">(2)</a> <a href="#ref-for-funcdef-color④">(3)</a> <a href="#ref-for-funcdef-color⑤">(4)</a>
    <li><a href="#ref-for-funcdef-color⑥">10.2. 
Predefined colorspaces: srgb, display-p3, a98-rgb, prophoto-rgb and rec-2020.</a>
    <li><a href="#ref-for-funcdef-color⑦">10.3. 
Specifying a color profile: the @color-profile at-rule</a>
    <li><a href="#ref-for-funcdef-color⑧"> Changes from Colors 3</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="invalid-color">
   <b><a href="#invalid-color">#invalid-color</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-invalid-color">10.1. Specifying profiled colors: the color() function</a> <a href="#ref-for-invalid-color①">(2)</a> <a href="#ref-for-invalid-color②">(3)</a> <a href="#ref-for-invalid-color③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-color-srgb">
   <b><a href="#valdef-color-srgb">#valdef-color-srgb</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-color-srgb">10.1. Specifying profiled colors: the color() function</a>
    <li><a href="#ref-for-valdef-color-srgb①">10.2. 
Predefined colorspaces: srgb, display-p3, a98-rgb, prophoto-rgb and rec-2020.</a> <a href="#ref-for-valdef-color-srgb②">(2)</a>
    <li><a href="#ref-for-valdef-color-srgb③">10.3. 
Specifying a color profile: the @color-profile at-rule</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-color-display-p3">
   <b><a href="#valdef-color-display-p3">#valdef-color-display-p3</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-color-display-p3">10. 
Profiled, Device-dependent Colors</a>
    <li><a href="#ref-for-valdef-color-display-p3①">10.1. Specifying profiled colors: the color() function</a>
    <li><a href="#ref-for-valdef-color-display-p3②">10.2. 
Predefined colorspaces: srgb, display-p3, a98-rgb, prophoto-rgb and rec-2020.</a> <a href="#ref-for-valdef-color-display-p3③">(2)</a>
    <li><a href="#ref-for-valdef-color-display-p3④">10.3. 
Specifying a color profile: the @color-profile at-rule</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-color-a98-rgb">
   <b><a href="#valdef-color-a98-rgb">#valdef-color-a98-rgb</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-color-a98-rgb">10.2. 
Predefined colorspaces: srgb, display-p3, a98-rgb, prophoto-rgb and rec-2020.</a> <a href="#ref-for-valdef-color-a98-rgb①">(2)</a> <a href="#ref-for-valdef-color-a98-rgb②">(3)</a> <a href="#ref-for-valdef-color-a98-rgb③">(4)</a>
    <li><a href="#ref-for-valdef-color-a98-rgb④">10.3. 
Specifying a color profile: the @color-profile at-rule</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-color-prophoto-rgb">
   <b><a href="#valdef-color-prophoto-rgb">#valdef-color-prophoto-rgb</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-color-prophoto-rgb">10. 
Profiled, Device-dependent Colors</a>
    <li><a href="#ref-for-valdef-color-prophoto-rgb①">10.2. 
Predefined colorspaces: srgb, display-p3, a98-rgb, prophoto-rgb and rec-2020.</a> <a href="#ref-for-valdef-color-prophoto-rgb②">(2)</a> <a href="#ref-for-valdef-color-prophoto-rgb③">(3)</a>
    <li><a href="#ref-for-valdef-color-prophoto-rgb④">10.3. 
Specifying a color profile: the @color-profile at-rule</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-color-rec-2020">
   <b><a href="#valdef-color-rec-2020">#valdef-color-rec-2020</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-color-rec-2020">10. 
Profiled, Device-dependent Colors</a>
    <li><a href="#ref-for-valdef-color-rec-2020①">10.2. 
Predefined colorspaces: srgb, display-p3, a98-rgb, prophoto-rgb and rec-2020.</a> <a href="#ref-for-valdef-color-rec-2020②">(2)</a>
    <li><a href="#ref-for-valdef-color-rec-2020③">10.3. 
Specifying a color profile: the @color-profile at-rule</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="at-ruledef-profile">
   <b><a href="#at-ruledef-profile">#at-ruledef-profile</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-at-ruledef-profile">10. 
Profiled, Device-dependent Colors</a>
    <li><a href="#ref-for-at-ruledef-profile①">10.1. Specifying profiled colors: the color() function</a>
    <li><a href="#ref-for-at-ruledef-profile②">10.2. 
Predefined colorspaces: srgb, display-p3, a98-rgb, prophoto-rgb and rec-2020.</a>
    <li><a href="#ref-for-at-ruledef-profile③">10.3. 
Specifying a color profile: the @color-profile at-rule</a> <a href="#ref-for-at-ruledef-profile④">(2)</a> <a href="#ref-for-at-ruledef-profile⑤">(3)</a> <a href="#ref-for-at-ruledef-profile⑥">(4)</a>
    <li><a href="#ref-for-at-ruledef-profile⑦"> Changes from Colors 3</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="css-color-profile">
   <b><a href="#css-color-profile">#css-color-profile</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-css-color-profile">10.3. 
Specifying a color profile: the @color-profile at-rule</a> <a href="#ref-for-css-color-profile①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="descdef-color-profile-src">
   <b><a href="#descdef-color-profile-src">#descdef-color-profile-src</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-descdef-color-profile-src">10.3. 
Specifying a color profile: the @color-profile at-rule</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="descdef-color-profile-rendering-intent">
   <b><a href="#descdef-color-profile-rendering-intent">#descdef-color-profile-rendering-intent</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-descdef-color-profile-rendering-intent">10.3. 
Specifying a color profile: the @color-profile at-rule</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="funcdef-device-cmyk">
   <b><a href="#funcdef-device-cmyk">#funcdef-device-cmyk</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-device-cmyk">4. 
Representing Colors: the &lt;color> type</a>
    <li><a href="#ref-for-funcdef-device-cmyk①">4.3. 
Resolving &lt;color> Values</a>
    <li><a href="#ref-for-funcdef-device-cmyk②">12. 
Device-dependent CMYK Colors: the device-cmyk() function</a> <a href="#ref-for-funcdef-device-cmyk③">(2)</a> <a href="#ref-for-funcdef-device-cmyk④">(3)</a> <a href="#ref-for-funcdef-device-cmyk⑤">(4)</a>
    <li><a href="#ref-for-funcdef-device-cmyk⑥"> Changes from Colors 3</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-cmyk-component">
   <b><a href="#typedef-cmyk-component">#typedef-cmyk-component</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-cmyk-component">12. 
Device-dependent CMYK Colors: the device-cmyk() function</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="naively-convert-from-cmyk-to-rgba">
   <b><a href="#naively-convert-from-cmyk-to-rgba">#naively-convert-from-cmyk-to-rgba</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-naively-convert-from-cmyk-to-rgba">12. 
Device-dependent CMYK Colors: the device-cmyk() function</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-opacity">
   <b><a href="#propdef-opacity">#propdef-opacity</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-opacity">13. 
Transparency: the opacity property</a> <a href="#ref-for-propdef-opacity①">(2)</a> <a href="#ref-for-propdef-opacity②">(3)</a> <a href="#ref-for-propdef-opacity③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-deprecated-colors">
   <b><a href="#typedef-deprecated-colors">#typedef-deprecated-colors</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-deprecated-colors"> Appendix A: Deprecated CSS System Colors</a>
   </ul>
  </aside>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>